How to dynamically append a string using jquery?

Question

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>

trincot · Accepted Answer · 2016-12-31 09:52:45Z

2

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>

answered Dec 31, 2016 at 9:52

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdelaziz Mokhnache · Accepted Answer · 2016-12-31 09:59:20Z

2

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>

edited Dec 31, 2016 at 9:59

answered Dec 31, 2016 at 9:51

Abdelaziz Mokhnache

4,3493 gold badges28 silver badges35 bronze badges

Comments

Seb Cooper · Accepted Answer · 2016-12-31 09:59:49Z

2

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/

edited Dec 31, 2016 at 9:59

answered Dec 31, 2016 at 9:45

Seb Cooper

5842 silver badges13 bronze badges

2 Comments

Dambo Over a year ago

Sorry my question was probably unclear, I was trying to append/replace the value as the if statement would suggest

Seb Cooper Over a year ago

Edited to replace existing string rather than append.

Nikhil Maheshwari · Accepted Answer · 2016-12-31 09:47:49Z

1

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/

answered Dec 31, 2016 at 9:47

Nikhil Maheshwari

2,24821 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to dynamically append a string using jquery?

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related