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

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

How can I get one image to appear at a time based on a condition in javascript?

javascript

image

onclick

conditional-statements