更改段落中的文本

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

我已经看过在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>

来源

2017-02-19 Michael Hampshire

更好的事件比点击提交时的形式提交。最后返回false不提交表单或使用event.preventDefault（）停止提交 – mplungjan

你成功更新元素，但随后的表单提交发生（因为按钮是type="submit"），其从服务器重新加载页面，所以旧的文本显示出来再次。

如果您不想要表单提交，请将类型更改为button。其他

两个问题的代码：

你被id仰视age元素，但它不具有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>

来源

2017-02-19 17:41:38

改变这一行

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

到

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

它不起作用，因为每次单击提交表单时都是有效的。

防止提交更改输入类型按钮

来源

2017-02-19 17:44:44

更好的事件比点击提交时的形式提交。返回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>

来源

2017-02-20 09:04:02 mplungjan

更改段落中的文本

回答

相关问题