Назначьте новую строку HTML-элементу с помощью innerHTML

#javascript #html

Вопрос:

Я хочу повторно использовать var для загрузки новой строки.

Итак, вот мои попытки.

 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>

Я уже объявил сообщение var вне функции, поэтому я не хочу повторять полную строку внутри функции…

Есть какие-нибудь предложения?

1. Избавьтесь от = '' в конце строки, которая присваивает msg .

2. Вы устанавливаете msg значение пустой строки, а не элемента.

3. Не делайте этого, и я отмечу, когда поля совпадают 🙁

4. var msg = document.getElementById('message'); msg.innerHTML = 'Fields match'; if (one !== two) { msg.innerHTML = 'Fields do not match'; return false; } return true; . Это все, что тебе нужно.

Ответ №1:

Когда вы устанавливаете msg , это должно быть просто результатом вызова getElementById() , а не результатом innerHTML . И вы не должны назначать '' его одновременно.

Вы устанавливали msg пустую строку, поэтому вы не можете ее использовать 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>

Ответ №2:

Ты можешь сделать это вот так:

 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>