CODEWITHSUNDEEP
javascriptjqueryhtml
Dambo
Dambo

Reputation: 3496

How to dynamically append a string using jquery?

I am trying to use jquery to append the value selected from a dropdown menu to an element in the body. To double check that the dropdown returns any values, I used the jquery to change the background color of the page, which works. However, I am not able to conditionally display the color name after() the <p></p> element:

Fiddle : https://jsfiddle.net/7765fvjf/

$('#dropdlist').on('mouseenter mouseleave', function()  {
var $color = $('#dropdlist :selected').text();
$('body').css('background', $color);
var $colorName = $('.colorName');
var newColor = ("<p class='colorLabel'>" + $color + "</p>");
var $colorLabel= $('.colorName',$newColor);

if (!$colorLabel[0]) $colorName.after(newColor);
else $colorName.replaceWith(newColor)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdlist'>
  <option value="green">green</option>
  <option value="yellow">yellow</option>
  <option value="blue">blue</option>
</select>
<p id='tt' class='colorName'>
The background color is:
</p>

Upvotes: 0

Views: 72

Answers (4)

Seb Cooper
Seb Cooper

Reputation: 574

You had a syntax error: Uncaught ReferenceError: $newColor is not defined.

Updated JS code to: 

$('#dropdlist').on('change', function()  {
  var $color = $('#dropdlist :selected').text();
  $('body').css('background', $color);
  var htmlTarget = $('.colorName span');
  var newColor = ("<p class='colorLabel'>" + $color + "</p>");
  var $colorLabel= $('.colorName',newColor);

  htmlTarget.html(newColor);
  //else $colorName.replaceWith(newColor);
});

This works. See jsfiddle: https://jsfiddle.net/7765fvjf/6/

Upvotes: 2

Abdelaziz Mokhnache
Abdelaziz Mokhnache

Reputation: 4349

you can do it like so, add a "color" span and change it's content dynamically each time the user select a new color.

$('#dropdlist').on('mouseenter mouseleave', function()  {
  var $color = $('#dropdlist :selected').text();
  $('body').css('background', $color);
  // change the text of ".color" span
  $(".color").html($color);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdlist'>
  <option value="green">green</option>
  <option value="yellow">yellow</option>
  <option value="blue">blue</option>
</select>
<p id='tt' class='colorName'>
The background color is: <span class="color"></span>
</p>

Upvotes: 2

trincot
trincot

Reputation: 351369

It seems more useful to have the colorLabel span present from the start -- with an id -- and only update its contents, not the contents of the surrounding p which only complicates things.

Secondly, using the change event is more appropriate.

Finally, with trigger() you can launch the function upon page load as well:

$('#dropdlist').on('change', function()  {
  var $color = $('#dropdlist :selected').text();
  $('body').css('background', $color);
  $("#colorLabel").text($color);
}).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdlist'>
  <option value="green">green</option>
  <option value="yellow">yellow</option>
  <option value="blue">blue</option>
</select>
<p id='tt' class='colorName'>
The background color is: <span id="colorLabel"></span>
</p>

Upvotes: 2

Nikhil Maheshwari
Nikhil Maheshwari

Reputation: 2248

You were close. Just provide an id to the paragraph.

HTML :

<select id="dropdlist">
  <option value="volvo">green</option>
  <option value="saab">yellow</option>
  <option value="mercedes">blue</option>
</select>
<p id="para"></p>

JavaScript : 

$('#dropdlist').on('change', function() {
  var $color = $('#dropdlist :selected').text();
  $('body').css('background', $color);
  var $colorName = $('.colorName');
  $('#para').html('The background color is ' + $color)
});

JSFiddle :

https://jsfiddle.net/nikdtu/weqo1y30/

Upvotes: 1

Related Questions