I have two buttons on an HTML page, and I'm trying to show them once a button is pressed, but only one actually displays.

This is the HTML

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

This is the 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%;
}

And this is the 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];

}

The left button works perfectly how I want it to, but for some reason, the right button doesn't display

CodePudding user response：

The element ID for your right button is "right-image-description" but in your Javascript you are trying to get "right-item-description".

CodePudding user response：

change the id attribute from this: var righ = document.getElementById("right-item-description"); to var righ = document.getElementById("right-image-description"); and it should work.