更改段落中的文本

我正在嘗試更改段落的文本，並且在代碼中可以看到的所有內容都應該可以工作，但它不會更改文本？更改段落中的文本

我已經看過在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

更改段落中的文本

回答

相關問題