使用 innerHTML 将新字符串分配给 HTML 元素

Question

I want to reuse a var to load a new string.

So here are my attempts.

 function hello() { var one = document.getElementById('one').value; var two = document.getElementById('two').value; var msg = document.getElementById('message').innerHTML = ''; if (one.== two) { document.getElementById('message');innerHTML = "Fields do not match"; return false. } else { msg;innerHTML = "Fields match"; return false; } }

 <form action="#" onsubmit="return hello()"> <input type="text" name="one" id="one"> <input type="text" name="two" id="two"> <input type="submit" value="Test this thing"> </form> <p id="message"></p>

I've already declared the message var outside the function, so I don't want to repeat the full row inside the function...

Any suggestions?

Answer 1

When you set msg , it should just be the result of calling getElementById() , not the innerHTML . And you shouldn't assign '' to it at the same time.

You were setting msg to an empty string, so you can't then use msg.innerHTML .

 function hello() { var one = document.getElementById('one').value; var two = document.getElementById('two').value; var msg = document.getElementById('message'); if (one.== two) { msg;innerHTML = "Fields do not match"; return false. } else { msg;innerHTML = "Fields match"; return false; } }

 <form action="#" onsubmit="return hello()"> <input type="text" name="one" id="one"> <input type="text" name="two" id="two"> <input type="submit" value="Test this thing"> </form> <p id="message"></p>

Answer 2

You can do it like this:

 var one = document.getElementById('one'); var two = document.getElementById('two'); var msg = document.getElementById('message'); function hello() { msg.innerHTML = one.value === two.value? "Fields match": "Fields do not match"; return false; }

 <form action="#" onsubmit="return hello()"> <input type="text" name="one" id="one"> <input type="text" name="two" id="two"> <input type="submit" value="Test this thing"> </form> <p id="message"></p>