How can I also display text when clicked?

by Adrian Carriger

HTML

<div onclick="alter()" id="addButton">+</div>
<div onclick="alter2()" id="leftButton">+</div>
<div onclick="alter3()" id="rightButton">+</div>
<div id="showhereid "></div>

CSS

#addButton {
    background-color: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -50px;
    font-size: 60px;
    color: white;
    text-align: center;
    line-height: 90px;
}
.cancelButton {
    animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
    to {
        border-radius: 0;
        transform: rotate(45deg);
        background-color: #AD80FF;
    }
    from {
    }
}
#leftButton {
    background-color: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 25%;
    margin: -50px;
    font-size: 60px;
    color: white;
    text-align: center;
    line-height: 90px;
}
.cancelLeftButton {
    animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
    to {
        border-radius: 0;
        transform: rotate(45deg);
        background-color: #AD80FF;
    }
    from {
    }
}
#rightButton {
    background-color: black;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    right: 25%;
    margin: -50px;
    font-size: 60px;
    color: white;
    text-align: center;
    line-height: 90px;
}
.cancelRightButton {
    animation: turnToCross 1s forwards cubic-bezier(0.000, 1.650, 1.000, 1.650);
}
@keyframes turnToCross {
    to {
        border-radius: 0;
        transform: rotate(45deg);
        background-color: #AD80FF;
    }
    from {
    }
}

JavaScript

function alter() {
     var button = document.getElementById('addButton');
     button.setAttribute('class', 'cancelButton');
     document.getElementById('showhereid').innerHTML = "your text";
 }

 function alter2() {
     var button = document.getElementById('leftButton');
     button.setAttribute('class', 'cancelLeftButton');
     document.getElementById('showhereid').innerHTML = "your text";
 }

 function alter3() {
     var button = document.getElementById('rightButton');
     button.setAttribute('class', 'cancelRightButton');
     document.getElementById('showhereid').innerHTML = "your text";
 }