使用.innerHTML使用DOM

我正在嘗試在我的腦海中做一些非常簡單的事情，因爲某些原因我沒有獲得期望的結果？我是新來的JavaScript，但經驗豐富的Java，所以我相信我沒有使用某種正確的規則。使用.innerHTML使用DOM

這是一個簡單的函數來獲取輸入的值，檢查看看哪個單選按鈕被選中，並將其價格（價值）添加到我的var input;。這是所有工作，但我的三行代碼，document.getElementById("outar").innerHTML = "Small Pizza";/Medium Pizza /和Large Pizza不輸出字符串「小比薩」到我的元素id = outar。

EDIT1：因爲我回顧這段等待答覆我注意到，我在顯示字符串我給它的希望叫document.getElementById("outar").innerHTML兩次，一次，然後下顯示輸入。這是否會互相重疊，併成爲我只看到輸入顯示的原因？ *****

function calculate() 
    { 
     var input = 0; 
     if (document.getElementById("small").checked) 
     { 
     alert("yay"); /*testing to see if i made it into the if statements*/ 
     input += parseInt(document.getElementById("small").value); 
     document.getElementById("outar").innerHTML = "Small Pizza"; 
     document.getElementById("outar").innerHTML = input; 
     } 
     else if (document.getElementById("med").checked) 
     { 
     input += parseInt(document.getElementById("med").value); 
     document.getElementById("outar").innerHTML = "Medium Pizza"; 
     document.getElementById("outar").innerHTML = input; 
     } 
     else if (document.getElementById("large").checked) 
     { 
     input += parseInt(document.getElementById("large").value); 
     document.getElementById("outar").innerHTML = "Large Pizza"; 
     document.getElementById("outar").innerHTML = input; 
     } 
     else 
     { 
     alert("failed"); 
     }

}

我試圖輸出這些新的字符串到我的HTML元素的ID outar

<th rowspan="10" id="outp"><h3>Order Details</h3><p id="outar"></p></th>

來源

2015-11-11 SenjuXo

答案編輯...是的。它會覆蓋。它會將innerHTML設置爲任何輸入。 – Shaun

剛剛經過測試，我看到了。我將如何去顯示兩行文字？使它們變成兩個變量？ – SenjuXo

在一起嗎？連接像innerHTML =「大比薩」+輸入 – Shaun

我想我會重構代碼一點點：

function calculate() { 
    var small = document.getElementById("small"), 
    med = document.getElementById("med"), 
    large = document.getElementById("large"); 

    if (small.checked) { 
    alert("yay"); /*testing to see if i made it into the if statements*/ 
    setOutput("small", "Small Pizza"); 
    } else if (med.checked) { 
    setOutput("large", "Medium Pizza"); 
    } else if (large.checked) { 
    setOutput("large", "Large Pizza"); 
    } else { 
    alert("failed"); 
    } 
} 

function setOutput(valueID, productName) { 
    var total = document.getElementById(valueID).value || 0, 
    outar = document.getElementById("outar"); 
    outar.innerHTML = productName + " " + total.toString(); 
}

逸岸，如果你有這樣的複選框：

<input type="checkbox" value="12" onchange="setOuput(this)" label="Small Pizza" /> 

<input type="checkbox" value="18" onchange="setOuput(this)" label="Medium Pizza" /> 

<input type="checkbox" value="24" onchange="setOuput(this)" label="Large Pizza" />

然後，您可以避免所有其他代碼，並具有以下setOutput函數。這也加總了選中的複選框。

function setOutput(chk) { 
    var cost = chk.checked ? chk.value : -chk.value, 
    totalElement = document.getElementById("total"), 
    sum = parseInt(totalElement.innerHTML || 0) + cost; 
    totalElement.innerHTML = sum; 
document.getElementById("pname") = chk.label; 
}

你的HTML改爲：

<th rowspan="10" id="outp"><h3>Order Details</h3><span id="pname"></span><span id="total"></span></th>

來源

2015-11-11 02:22:36 Shaun

使用.innerHTML使用DOM

回答

相關問題