Can I use a variable in JS for my html?

Question

I have a JS file CharacterSelection where a user can select an avatar and type their name into a textarea.

Now I want to set a text div in an html file to the contents of the textarea. I will use it to display the player's name at a specific location on the screen.

I know that I can set a div to a text, such as: <div id ="statSheetExitButton">Exit</div> will show "Exit" (style and location depending on css)

I'm wondering if there is any way to put a String variable in there, since I will not know what name the player enters.

I grab the textarea's contents using var name = $("#nameTextBox").val();

I'm thinking that saying <div id ="playerName">name</div> will display the text "name".

Is there a way to accomplish my goal?

Answer 1

$("#nameTextBox").change(function(){
  $("#playerName").html($(this).val());
});

This will attach an event handler to the textbox so everytime the name changes the div is updated.

Here is a working example. http://jsfiddle.net/2NkTb/

Please note that for the onchange event you must tab out of textbox or the textbox must lose focus

Answer 2

var name = $("#nameTextBox").val();
$("#playerName").html(name);

Answer 3

Do this:

var name = $("#nameTextBox").val();
$('#playerName').text(name);

Answer 4

You could do something like this which will replace the html of the tag with your JavaScript string:

$('#playerName').html(myNameVar);

Other than that, I don't think you can directly inject JavaScript variables like you would in a template language.

Answer 5

Try:

   $('#playerName').html($("#textbo").val());

Answer 6

var playerName = 'John Dow'
document.getElementById('playerName').innerHTML=playerName

Answer 7

You need to set the property innerHTML of you div element.

$("playerName").innerHTML = name;