我在显示带有 javascript 的 html 按钮时遇到问题

Question

我在 HTML 页面上有两个按钮，我试图在按下按钮后显示它们，但实际上只有一个显示。

这是 HTML

<button onclick="testLeft()" class="item-description" id= "left-item-description">.</button>
<button onclick="testRight()" class="item-description" id= "right-image-description">.</button>

这是 CSS

.item-description {
    display: none;
    box-sizing: border-box;
    position: fixed;
    z-index: 4;
    font-size: 35px;
    font-weight: 600;
    height: auto;
    top: 30%;
    padding: 10px 10px;
    color:white;
    background-color: transparent;
    border-radius: 4px;
    border: 3px solid black;
    transition: all 0.2s ease;
}


#left-item-description {
    margin-left: 10%;
    margin-right: 60%;
}

#right-image-description {
    margin-right: 10%;
    margin-left: 60%;
}

这是 javascript

function newGame(){
    score = -1;
    increaseScore();
    correct = true;

    for (let i = 0; i < used.length; i++){
        used[i] = false;
    }

    indexLeft = shuffleIndex();
    indexRight = shuffleIndex();
    var left = document.getElementById("left-item-description");
    var righ = document.getElementById("right-item-description");
    
    left.style.display = "block";
    left.innerText = items[indexLeft];
    document.getElementById("left-item-image").src=images[indexLeft];
    
    righ.style.display = "block";
    righ.innerText = items[indexRight];
    document.getElementById("right-item-image").src=images[indexRight];

}

左键按我想要的方式完美运行，但由于某种原因，右键不显示

Answer 1

您的右键的元素 ID 是“right-image-description”，但在您的 Javascript 中，您正试图获得“right-item-description”。

Answer 2

从此更改 id 属性： var righ = document.getElementById("right-item-description"); 到var righ = document.getElementById("right-image-description"); 它应该可以工作。