Show and hide button using only html text name of button

button has no id or class, the class name is the same in all three buttons
How do I show and hide using only the text name of the button

<div class="div" style="display: block;">
  <button class="standart">Evet</button>
  <button class="standart">Hayır</button>
  <button class="standart">Dizin</button>

I want to use show and hide only “Dizin” button here

Are you able to add the text content (or some other identification) to the buttons as well? Ie data-text="Dizin"

If not then a very ugly way may be to select that specific button
document.querySelector('button.standart:nth-of-type(3)').hidden = true

Adding some selectable property to the button elements would be much better though


It is not possible to add, because I am not creating

I found and implemented something like the following.
It works fine, but I don’t know how accurate it is

    var i=0;
    var newID='button_'+i;


<div class="div" style="display: block;">
	<button class="standart" style="display: inline-block;" id="button_1">Evet</button>
	<button class="standart" style="display: inline-block;" id="button_2">Hayır</button>
	<button class="standart" style="display: none;" id="button_3">Dizin</button>

Now I can implement show and hide as below.


I know I’m a little late to the game, but I’m updating a trivia game that uses buttons.

This is how I am going about doing it →


    <div id="quiz" class="displayMessage" data-username="">
        <div class="triviaContainer" data-records=" ">
            <div id="mainGame">
                <div id="current">Current question is <span id="currentQuestion" data-record=""></span></div>
                <div id="triviaSection" data-correct="">
                    <div id="questionBox">
                        <h2 id="question"></h2>
                        <button class="buttonStyle" id="ans1"></button>
                        <button class="buttonStyle" id="ans2"></button>
                        <button class="buttonStyle" id="ans3"></button>
                        <button class="buttonStyle" id="ans4"></button>
                    <div id="buttonContainer"></div>
                <div id="headerStyle" data-user="">
                    <button id="next" class="nextBtn">Next</button>
                    <p id="score">Points: 0</p>
                    <p id="percent">100% Correct</p>


Setting up the buttons in Vanilla JavaScript →

    /* Answer Buttons */
    let answer1 = document.querySelector('#ans1');
    let answer2 = document.querySelector('#ans2');
    let answer3 = document.querySelector('#ans3');
    let answer4 = document.querySelector('#ans4');

Setting up the buttons to display the questions →

       /* Display the questions and answers on the page */
        q["textContent"] = question;
        answer1["textContent"] = ans1;
        answer2["textContent"] = ans2;
        answer3["textContent"] = ans3;
        answer4["textContent"] = ans4;

        /* Add Listener to Answer 1 */
        answer1.addEventListener('click', pick1,false);

        /* Add Listener to Answer 2 */
        answer2.addEventListener('click', pick2,false);

        /* There doesn't have to be 3 or 4 answers in the Trivia Game */
        if (ans3 !== "") {
            /* Add Listener to Answer 3 */
            answer3.addEventListener('click', pick3,false);

        if (ans4 !== "") {
            /* Add Listener to Answer 4 */
            answer4.addEventListener('click', pick4,false);

the functions for the addEventListeners →

    /* All the data has been retrieved from the database table with exception to the correct answer and
     * and in my opinion makes it doing this way cleaner when using add event listeners. That way removing the
     * addEventListener is easier.

    const pick1 = () => {
        let id = document.querySelector('#currentQuestion').getAttribute('data-record');
        choice = 1;
    const pick2 = () => {
        let id = document.querySelector('#currentQuestion').getAttribute('data-record');
        choice = 2;
    const pick3 = () => {
        let id = document.querySelector('#currentQuestion').getAttribute('data-record');
        choice = 3;
    const pick4 = () => {
        let id = document.querySelector('#currentQuestion').getAttribute('data-record');
        choice = 4;

I won’t bore you with the rest, but maybe this will help? This was done in Vanilla JavaScript

Here’s a very rough beta version of the game -

Full JavaScript Code can be found here → fanoflego/trivia.js at main · Strider64/fanoflego · GitHub

You can really get creative with creative buttons, but it’s also gets a little more in-depth.

    /* Populate Question, Create Answer Buttons */
    const createQuiz = (gameData) => {


        question.textContent = gameData.question;

         * Create Buttons then insert answers into buttons that were
         * create.
        gameData.answers.forEach((value, index) => {

            let gameButton = buttonContainer.appendChild(d.createElement('button'));
   = 'answer' + (index + 1);
            gameButton.className = 'answerButton';
            gameButton.setAttribute('data-correct', (index + 1).toString());
            gameButton.addEventListener('click', clickHandler, false);
             * Don't Show Answers that have a Blank Field
            if (value !== "") {
                gameButton.appendChild(d.createTextNode("📷 " + value));
            } else {
                gameButton.appendChild(d.createTextNode(" "));
       = "none"; // Disable Click on Empty Field

This version of the game can be found here - Trivia Game

Full code of JavaScript of this version - fanoflego/game.js at main · Strider64/fanoflego · GitHub

Sponsor our Newsletter | Privacy Policy | Terms of Service