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

}