我正在尝试显示由所选单选按钮决定的图像

I'm attempting to display an image determined by the radio button that is chosen

本文关键字：单选按钮 决定 图像 显示      更新时间：2023-09-26

这个具体项目的重点是计算和显示所选硬币的价值和数量，并显示所选硬币图像的适当数量…

这是我到目前为止所做的…

<!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 = "answerswer";
            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>

几件事

  • 你真的想用单选按钮吗?如果可以选择其中一个选项，则只需要一个单选按钮。在这种情况下，您需要通过给它们赋予相同的名称来对它们进行分组。

  • 您正在错误地尝试使用比较操作符==分配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);
相关文章：