Assign new string to an HTML element using innerHTML

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?

Get rid of = '' at the end of the line that assigns to msg. — Barmar
– Barmar, Commented May 19, 2021 at 21:52
var msg = document.getElementById('message'); msg.innerHTML = 'Fields match'; if (one !== two) { msg.innerHTML = 'Fields do not match'; return false; } return true;. That's all you need. — Heretic Monkey
– Heretic Monkey, Commented May 19, 2021 at 21:56

Barmar · Accepted Answer · 2021-05-19 21:56:34Z

2

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>

answered May 19, 2021 at 21:56

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

Samuel Ramzan Over a year ago

Thank You Barmar.... Excellent explanation. Thank You * 3

NeNaD · Accepted Answer · 2021-05-19 22:09:16Z

1

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>

answered May 19, 2021 at 22:09

NeNaD

20.9k11 gold badges65 silver badges119 bronze badges

1 Comment

Samuel Ramzan Over a year ago

I Love shorthand comparisons, Thank You, Nenad.

Collectives™ on Stack Overflow

Assign new string to an HTML element using innerHTML

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related