Simple innerHTML update not working

Question

Long story short, I'm enhancing an existing registration form to perform a simple "are you human" check. Easy stuff (one would think). I haven't even gotten to the good stuff yet, because I can't seem to set the innerHTML of a couple span elements on the page.

Here's the stripped down code...

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

And the stripped down script...

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').innerHTML = "" + num1;
$('#answer').innterHTML = "" + answer;

At this point... I would just like to see the last two lines set the correct form elements so that I can continue to work on the validation functions. I must have a typo or logic error in here... thoughts?

Here's the fiddle: http://jsfiddle.net/2e9Xc/

Just curious, why are you using `.innerHTML` instead of `.html()` since you're using jQuery? — j08691, Oct 28 '13 at 14:51
Grrr... thanks guys. That's it. Must be having a brain fart this morning. — Charlie74, Oct 28 '13 at 14:53

Jason P · Answer 1 · 2013-10-28T15:23:01.337

3

.innerHTML is a property of a DOM element.

document.getElementById('num1').innerHTML = "" + num1;

html() is the jQuery function to use instead of innerHTML:

$('#num1').html(num1);

edited Oct 28 '13 at 15:23

answered Oct 28 '13 at 14:52

Jason P

26,984
3
31
45

update `$('#num1').html("" + num1);` to `$('#num1').html(num1);` and I will put a +1 for you. Check my answer to get what I mean. – Sina R. Oct 28 '13 at 15:15
@imsiso That's true, I guess it isn't necessary. – Jason P Oct 28 '13 at 15:23

score 2 · Accepted Answer · answered Oct 28 '13 at 14:53

2

Use:

$('#num1').html(num1);
$('#answer').html(answer);

Since you already have jQuery loaded using the .html() is best.

See: http://api.jquery.com/html/

If you insist on using innerHTML you need to get a proper DOM object from the jQuery object like this:

$('#num1')[0].innerHTML = "" + num1;
$('#answer')[0].innterHTML = "" + answer;

answered Oct 28 '13 at 14:53

iambriansreed

21,935
6
63
79

+1 good answer + you had not used `(string)` in `.html()` – Sina R. Oct 28 '13 at 15:09

score 1 · Answer 3 · answered Oct 28 '13 at 14:53

You don't use InnerHTML on a JQuery object. You use the html() method instead. Like this:

HTML

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

JavaScript

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').html(num1);
$('#answer').html(answer);

JSFiddle

http://jsfiddle.net/2e9Xc/1/

score 0 · Answer 4 · answered Oct 28 '13 at 14:53

0

just use

$('#num1').html("" + num1);

.html() is best choice.

answered Oct 28 '13 at 14:53

Vinay Pratap Singh Bhadauria

9,829
3
28
49

Simple innerHTML update not working

4 Answers4