Question

我正在尝试更改段落的文本，我在代码中可以看到的所有内容都应该有效，但是它不会更改文本？

我已经查看了stackoverflow上的多个帖子，我已经实现了他们所说的但我的段落仍然没有改变。我正在尝试根据用户在表单文本框中输入的内容来更改段落。我错过了什么吗？

function ticketPrice() {

  var age = document.getElementById("age");
  var newAge = parseInt(age);

  if (newAge <= 5) {
    document.getElementById("price").innerHTML = "Free";
  } else if (newAge >= 6 && newAge <= 17) {
    document.getElementById("price").innerHTML = "Half Price";
  } else if (newAge >= 18 && newAge <= 55) {
    document.getElementById("price").innerHTML = "Full Price";
  } else if (newAge >= 55) {
    document.getElementById("price").innerHTML = "$2 off";
  } else
    document.getElementById("price").innerHTML = "ERROR"
}

<p>Please enter your age to find the price of your movie ticket.</p>
<form id="form1" action="" method="POST">
  Please enter your age:<br>
  <input type="text" name="age" value=""><br><br>
  <p id="price">Hello</p>
  <input type="button" onclick="ticketPrice()" value="submit">
</form>

Answer 1

您正在成功更新元素，但随后表单提交（因为按钮为type="submit"），从服务器重新加载页面，因此旧文本再次显示。

如果您不希望提交表单，请将类型更改为button。

代码的其他两个问题：

您正在按age查找id元素，但它没有id，只有name。添加id="age"。
解析为整数时，您正在使用元素本身;您想使用其值（添加.value）。

所以（见评论）：

function ticketPrice() {

  // *** .value on the next line
  var age = document.getElementById("age").value;
  var newAge = parseInt(age);

  if (newAge <= 5) {
    document.getElementById("price").innerHTML = "Free";
  } else if (newAge >= 6 && newAge <= 17) {
    document.getElementById("price").innerHTML = "Half Price";
  } else if (newAge >= 18 && newAge <= 55) {
    document.getElementById("price").innerHTML = "Full Price";
  } else if (newAge >= 55) {
    document.getElementById("price").innerHTML = "$2 off";
  } else
    document.getElementById("price").innerHTML = "ERROR"
}

<p>Please enter your age to find the price of your movie ticket.</p>
<form id="form1" action="" method="POST">
  Please enter your age:<br>
  <!-- *** id="age" *** -->
  <input type="text" name="age" id="age" value=""><br><br>
  <p id="price">Hello</p>
  <!-- *** type=button *** -->
  <input type="button" onclick="ticketPrice()" value="submit">
</form>

Answer 2

更改此行

    <input type="submit" onclick="ticketPrice()" value="submit">

到

    <input type="button" onclick="ticketPrice()" value="submit">

它不起作用，因为每次点击提交时，表单都会被提交。

阻止提交将输入类型更改为按钮

Answer 3

比提交点击更好的事件是表单提交。最后返回false以不提交表单或使用event.preventDefault（）来停止提交

JSFIDDLE

window.onload = function() {
  document.getElementById("form1").onsubmit = function(e) {
    e.preventDefault(); // stop submission
    var age = parseInt(document.getElementById("age").value), text = "ERROR";
    console.log(age)
    if (age <= 5) text = "Free";
    else if (age >= 6 && age <= 17)  text = "Half Price";
    else if (age >= 18 && age <= 55) text = "Full Price";
    else if (age >= 55) text= "$2 off";
    document.getElementById("price").innerHTML = text;
  }
}

<p>Please enter your age to find the price of your movie ticket.</p>
<form id="form1" action="" method="POST">
  Please enter your age:<br>
  <!-- *** id="age" *** -->
  <input type="text" name="age" id="age" value="" /><br><br>
  <p id="price">Hello</p>
  <!-- *** type=button *** -->
  <input type="submit" />
</form>

更改段落中的文本

3 个答案: