почему моя функция javascript не отображает мое сообщение?

Question

Итак, я подключил файл javascript к своему html файлу. Когда кнопка нажата, она должна отображать сообщение, но по какой-то причине ничего не отображает. Что я делаю не так? (ps я очень мало знаю о js)

function calc() {
  greeting = "hello"
  var usname = document.getElementById("name").innerHTML = greeting;
}

<header>
  <p> BMI Calculator</p>
</header>
<div class="grid">
  <div class=input>
    <form>
      <p> Fill in the form below</p>
      Name: <br>
      <input type="text" name="name" id="name"><br> Weight: <br>
      <input type="number" name="weight"><br> Height: <br>
      <input type="number" name="height"><br>
      <input type="radio" name="gender" value="female">Female
      <input type="radio" name="gender" value="male">Male
      <input type="radio" name="gender" value="other">Other<br>
      <br><input type="button" onclick="calc()" name="calculate" value="calculate">
    </form>
  </div>
  <div class="result">
    <p> Your Results</p>
  </div>
</div>

Answer 1

Сначала вы нацеливаетесь на элемент ввода. Элементы ввода не имеют свойства inner HTML, у них есть значение, которое представляет текст. См. Фрагмент

function calc() {
  greeting = "hello"
  var usname = document.getElementById("name");
  var usrname_value = usname.value;
  var message = greeting + usrname_value;
  //Uncomment to save value
  //usname.value = message;

  //change result
  document.querySelector(".result p").innerHTML = message;
  }

<header>
  <p> BMI Calculator</p>
</header>
<div class="grid">
  <div class=input>
    <form>
      <p> Fill in the form below</p>
      Name: <br>
      <input type="text" name="name" id="name"><br> Weight: <br>
      <input type="number" name="weight"><br> Height: <br>
      <input type="number" name="height"><br>
      <input type="radio" name="gender" value="female">Female
      <input type="radio" name="gender" value="male">Male
      <input type="radio" name="gender" value="other">Other<br>
      <br><input type="button" onclick="calc()" name="calculate" value="calculate">
    </form>
  </div>
  <div class="result">
    <p> Your Results</p>
  </div>
</div>

Answer 2

используйте следующую модифицированную функцию:

function calc() {
greeting = "hello"
var usname = document.getElementById("name").value = greeting;

}

Answer 3

вы используете неправильное свойство. если бы у вас был div вроде <div id="name"></div>, то document.getElementById("name").innerHTML = "abc"; превратил бы его в <div id="name">abc</div>. В вашем случае вы хотите установить значение поля ввода, а не заполнять больше дочерних компонентов.

вы можете сделать это с помощью document.getElementById("name").value = greeting

Answer 4

Проблема заключается в этой строке:

var usname = document.getElementById("name").innerHTML = greeting;

Во-первых, вы дважды используете знак = - я бы не стал этого делать. Вместо этого вы можете использовать два варианта:

document.getElementById("name").innerHTML = greeting;

var usname = document.getElementById("name");
usname.innerHTML = greeting;

Я выбрал первый вариант.

Другое дело, что для элементов input вам необходимо используйте value, а не innerHTML. Элемент div, span или аналогичный элемент будет иметь свойства innerHTML и innerText, но входные данные - нет.

Полное рабочее решение см. В приведенном ниже фрагменте:

function calc() {
  greeting = "hello"
  document.getElementById("name").value = greeting;
}

<header>
  <p> BMI Calculator</p>
</header>
<div class="grid">
  <div class=input>
    <form>
      <p> Fill in the form below</p>
      Name: <br>
      <input type="text" name="name" id="name"><br> Weight: <br>
      <input type="number" name="weight"><br> Height: <br>
      <input type="number" name="height"><br>
      <input type="radio" name="gender" value="female">Female
      <input type="radio" name="gender" value="male">Male
      <input type="radio" name="gender" value="other">Other<br>
      <br><input type="button" onclick="calc()" name="calculate" value="calculate">
    </form>
  </div>
  <div class="result">
    <p> Your Results</p>
  </div>
</div>

Answer 5

Вы должны изменить значение, потому что вы пишете во вводе, или, по крайней мере, сделайте ap

  <p name="name" id="name"><br> Weight: <br> </p>

(ввод не имеет внутреннего HTML текста, но имеет значение)

Или вы меняете JS:

document.getElementById("name").value = greeting;