如何根据 javascript 中的条件一次显示一张图像？

Question

我的网页正在执行它应该执行的操作，但是，我希望再次单击按钮后结果图像就会消失。它目前所做的，是留下上一个结果中的图像，而只显示下一个结果中的图像，这使得它变得混乱，它基本上只是堆积在图像上。我只想一次显示一张图像。请帮忙！

这就是正在发生的事情：

这就是我想要发生的事情（一次一张图像）：

HTML：

<form>

        <ul>

            <li>

                <label for="firstDegree">First Degree:</label>

                <input type="number" id="firstDegree">

            </li>

            <li>

                <label for="secondDegree">Second Degree:</label>

                <input type="number" id="secondDegree">

            </li>

            <li>

                <button type="submit" id="button" onclick="missingAngle();">Enter</button>

            </li>

        </ul>

    </form>

    <h2 id="result"></h2>

    <img src="images/acute-triangle.png" id="acute-triangle" style="display:none;">

    <img src="images/right-triangle.png" id="right-triangle" style="display:none;">

    <img src="images/obtuse-triangle.png" id="obtuse-triangle" style="display:none;">

JS：

function missingAngle(firstDegree, secondDegree) {

    var firstDegree = parseInt(document.getElementById('firstDegree').value);

    var secondDegree = parseInt(document.getElementById('secondDegree').value);

    document.getElementById('result').innerHTML =

        (firstDegree + secondDegree > 180) ? 'Sorry, not a triangle.' :

        (firstDegree + secondDegree > 90) ? 'The missing angle is an acute angle.' :

        (firstDegree + secondDegree === 90) ? 'The missing angle is a right angle.' :

        (firstDegree + secondDegree < 90) ? 'The missing angle is an obtuse angle.' :

        null;

    event.preventDefault();

    if (firstDegree + secondDegree > 90) {

        document.getElementById('acute-triangle').style.display = 'block';

    } else if (firstDegree + secondDegree === 90) {

        document.getElementById('right-triangle').style.display = 'block';

    } else if (firstDegree + secondDegree < 90) {

        document.getElementById('obtuse-triangle').style.display = 'block';

    }

}

Answer 1

发生的情况是，您显示了图像，但后来您没有使其消失。尝试这个：document.getElementById('right-triangle').style.display = 'none';document.getElementById('obtuse-triangle').style.display = 'none';document.getElementById('acute-triangle').style.display = 'none';首先我将全部设置为dyplay:none; 稍后你只需要显示一个：document.getElementById('right-triangle').style.display = 'none';document.getElementById('obtuse-triangle').style.display = 'none';document.getElementById('acute-triangle').style.display = 'none';if (firstDegree + secondDegree > 90) {document.getElementById('acute-triangle').style.display = 'block';}&nbsp;