如何根据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';

首先我将所有设置为dysplay: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';
}