Question

这个特定项目的目的是计算和显示所选硬币和数量的值，并显示所选硬币图像的适当份数......

这就是我到目前为止......

<!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>

提前致谢。

Answer 1

有几件事。

你真的想要使用单选按钮吗？如果可以选择其中一个选项，您只需要一个单选按钮。在这种情况下，您需要通过赋予它们相同的名称对它们进行分组。
您错误地尝试使用比较运算符==分配resultString。一个=用于设置变量两个或三个用于比较（取决于＆＃34;严格＆＃34;比较应该如何）。您没有链接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);

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

1 个答案: