為什么我的腳本不更改 HTML 中的文本？
[英]Why doesn't my script change the text within my HTML?
問題描述
我有以下代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
<div id="total">$0.00</div>
</form>
</body>
</html>
我希望該腳本在檢查帶有ID小的RadioButton時將DIV內的文本更改為1.00美元，而不是$ 0.00。 但是，當我 select 時什么也沒有發生。 我錯過了什么？
6 個解決方案
解決方案1
2 已采納 2012-04-04 20:57:12
您必須在某些事件上調用 function——JS 基本上是在事件上運行！！
<input type="radio" name="size" id="small" onclick="yourFxn()" />Small</td>
在你的腳本中
function yourFxn(){
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
}
解決方案2
1 2012-04-04 21:15:11
腳本是按順序閱讀的。 當你的 javascript 運行時，頁面上沒有 id total 的元素，因為它在腳本下面。
但是即使你移動下面的代碼，它仍然不會工作，因為沒有點擊事件附加到單選按鈕。 您的腳本僅檢查單選按鈕是否在頁面加載時以某種方式神奇地被選中並更改文本。 例如，此代碼將更改文本，但它要求您對選中的單選按鈕進行硬編碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
body {background-color:Gray;}
body {text-align:left;}
</style>
<title>My First Project</title>
</head>
<body>
<form>
<table border="1" align="center">
<u><h5>Size</h5></u>
<tr><td><input type="radio" name="size" id="small" checked="checked" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<br />
<div id="total">$0.00</div>
<script type="text/javascript">
if (document.getElementById('small').checked) {
document.getElementById('total').innerHTML = '$1.00';
}
else {
}
</script>
</form>
</body>
</html>
我認為您真正想要做的是將“點擊”事件附加到單選按鈕。
你可以在這里閱讀更多：
解決方案3
0 2012-04-04 20:59:56
這是一個基於代碼關鍵部分的工作示例： http://jsfiddle.net/9hxDq/
- 您需要執行代碼以響應事件（例如單擊、加載事件或響應被單擊的輸入）
- 您的某些標記無效（
TABLE內的U標記）
HTML
<table border="1" align="center">
<tr><td><input type="radio" name="size" id="small" />Small</td></tr>
<tr><td><input type="radio" name="size" id="medium" />Medium</td></tr>
<tr><td><input type="radio" name="size" id="large" />Large</td></tr>
</table>
<input type="button" value="Calculate" onclick="calculate()" />
<div id="total">$0.00</div>
JavaScript
function calculate()
{
if (document.getElementById('small').checked)
{
document.getElementById('total').innerHTML = '$1.00';
}
else
{
alert("not checked!");
}
}
解決方案4
0 2012-04-04 21:01:19
通過以下方式將單選按鈕上的點擊事件綁定到您的代碼：
var small = document.getElementById('small');
if (small.addEventListener) {
small.addEventListener('click', calc, false);
} else if (small.attachEvent) {
small.attachEvent('onclick', calc);
}
function calc() {
if (document.getElementById('small').checked) document.getElementById('total').innerHTML = '$1.00';
};
解決方案5
0 2012-04-04 21:01:39
你沒有得到 1.00 美元的原因是 - 里面的代碼將在頁面加載時執行。 但您需要的是在無線電的某些事件上設置 div 的值，而不是在頁面加載事件上。
所以在一些 function 中使用你的代碼，並在單選按鈕的點擊事件中調用 function
解決方案6
0 2012-04-04 21:26:43
它沒有更新的原因是因為腳本出現在<div id='total'>之前的代碼中。 而且，更重要的是，因為腳本在出現在頁面中時會立即執行，所以它會在將total元素添加到 DOM 之前運行。
要解決此問題，您需要將腳本移到 HTML 代碼中較低的位置，或者讓腳本僅在頁面加載完成后運行。 這些選項中的第一個是讓您啟動和運行的快速修復； 后者可能是更推薦的選項。
要讓它只在頁面加載完成后運行，將其包裝到一個 function 中，並使用頁面上的onload事件來觸發它。 或者，如果您使用的是 JQuery，請將其添加為$(document).ready() function。
為什么 HTML 腳本在我的 React 應用程序中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.