我正在嘗試顯示由所選單選按鈕確定的圖像
[英]I'm attempting to display an image determined by the radio button that is chosen
問題描述
這個具體項目的重點是計算並顯示所選硬幣的價值和數量，並顯示所選硬幣的圖像的適當副本數......
這是我到目前為止...
<!doctype html> <html> <head> <title>Coin Calc</title> <style> ul { list-style-type: none; } .error { color: red; font-size: 2em; } .error span { display: block; } .answer { color: black; font-size: 1.5em; } </style> <script> function ProcessForm() { if (DoValidation()) { DoCalculation(); } } function DoValidation() { document.getElementById("results2").innerHTML = ""; bValid = true; error = ""; if (document.getElementById("ddQuantity").value == "0") { bValid = false; error = "<span>Must select a quantity</span>"; document.getElementById("results").className = "error"; } else { if (isNaN(document.getElementById("ddQuantity").value)) { bValid = false; error = "<span>Must enter a number</span>"; document.getElementById("results").className = "error"; } } if ((document.getElementById("rbQuarters").checked == false) && (document.getElementById("rbDimes").checked == false) && (document.getElementById("rbNickels").checked == false) && (document.getElementById("rbPennies").checked == false)) { bValid = false; error = error + "<span>Must pick coin</span>"; document.getElementById("results").className = "error"; } if ((document.getElementById("rbQuarters").checked == true) && (document.getElementById("rbDimes").checked == true) && (document.getElementById("rbNickels").checked == true) && (document.getElementById("rbPennies").checked == true)) { bValid = false; error = error + "<span>Must pick one coin: REFERSH!</span>"; document.getElementById("results").className = "error"; } document.getElementById("results").innerHTML = error; return bValid; } function DoCalculation() { //get fahrenheit value from text box t = document.getElementById("ddQuantity").value; //calculate results if (document.getElementById("rbQuarters").checked) { answer = .25 * t label = "Total Amount"; } if (document.getElementById("rbDimes").checked) { answer = .10 * t label = "Total Amount"; } if (document.getElementById("rbNickels").checked) { answer = .05 * t label = "Total Amount"; } if (document.getElementById("rbPennies").checked) { answer = .01 * t label = "Total Amount"; } //display result document.getElementById("results").innerHTML = "<strong>" + answer + " </strong>" + label; document.getElementById("results").className = "answer"; resultString = ""; resultString3 =""; for (var i = 0; i <= ddQuantity; i++) { if (document.getElementById("rbQuarters").checked) { resultString == resultString + "\\images\\dime.gif"; } if (document.getElementById("rbDimes").checked) { resultString == resultString + "~\\Images\\dime.gif"; } if (document.getElementById("rbNickels").checked) { resultString == resultString + "~\\Images\\nickel.gif"; } if (document.getElementById("rbPennies").checked) { resultString == resultString + "~\\Images\\penny.gif"; } } document.getElementById("results2").innerHTML = resultString; document.getElementById("results3").innerHTML = resultString3; } </script> </head> <body> <form action="#" method="get"> <ul> <li> <label for="ddQuantity"> Quantity </label> <select name="ddQuantity" id="ddQuantity"> <option value="">Please select coin quantity</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </li> <li> <label for="rbQuarters"> Quarter </label> <input type="radio" name="rbQuarters" id="rbQuarters" value=".25" /> <label for="rbDimes"> Dimes </label> <input type="radio" name="rbDimes" id="rbDimes" value=".10" /> <label for="rbNickels"> Nickels </label> <input type="radio" name="rbNickels" id="rbNickels" value=".05" /> <label for="rbPennies"> Pennies </label> <input type="radio" name="rbPennies" id="rbPennies" value=".01" /> </li> <li> <input type="button" value="calculate" name="btnSumbit" onclick="ProcessForm();" /> </li> <li id="results"> </li> <li id="results2"> </li> </ul> </form> </body> </html>
提前致謝。
1 個解決方案
解決方案1
0 已采納 2015-10-12 02:40:44
幾件事。
你真的想使用單選按鈕嗎？ 如果可以選擇其中一個選項，您只需要一個單選按鈕。 在這種情況下，您需要通過給它們相同的名稱來對它們進行分組。
您錯誤地嘗試使用比較運算符
==分配 resultString 。 一個=用於設置變量，兩個或三個用於比較（取決於比較應該有多“嚴格”）。 您沒有鏈接 if 語句並不斷添加到 resultString 的事實使我相信您打算使用復選框而不是收音機。if (document.getElementById("rbQuarters").checked) { // Dime image for quarters? resultString == resultString + "\\images\\dime.gif"; } if (document.getElementById("rbDimes").checked) { resultString == resultString + "~\\Images\\dime.gif"; }為什么每個后續路徑都包含
~？ 此外，您不能只是將路徑附加到 innerHTML 並期望圖像。 字符串只是文本。 您需要構建元素並將其附加到文檔中。var imgs = document.createElement("span"); var img1 = document.createElement("img"); img1.src = "path_to/img.jpg"; imgs.appendChild(img1); var img2 = document.createElement("img"); img2.src = "path_to/img.jpg"; imgs.appendChild(img2); document.getElementById("someID").appendChild(imgs);
單擊右箭頭時，我試圖更改圖像的來源（並因此顯示）。 但是，圖像變為“未定義”
[英]I'm attempting to change an image's source (and therefore display) when a right arrow is clicked. However, the image becomes “undefined”
我正在使用struts2，詢問的是單選按鈕驗證<s:radio>
[英]I'm using struts2,i'm asking about the radio button validation <s:radio>
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.