# Show and hide button using only html text name of button
**URL:** \
**Category:** Javascript & Ajax\
**Created:** [February 11, 2023, 10:47am UTC](https://www.phphelp.com/t/show-and-hide-button-using-only-html-text-name-of-button/35276 "2023-02-11T10:47:48Z")\
**Posts on this page:** 5\
**Page:** 1
Hello,
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
```auto
```
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
---
> [@JimL](#):
>
> Are you able to add the text content (or some other identification) to the buttons as well? Ie `data-text="Dizin"`
No
> [@JimL](#):
>
> 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;
$('.standart').each(function(){
i++;
var newID='button_'+i;
$(this).attr('id',newID);
});
```
Result
```auto
```
Now I can implement show and hide as below.
```auto
if(show){
$('#button_3').show();
}else{
$('#button_3').hide();
}
```
---
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 →
HTML
```auto
Current question is
Points: 0
100% Correct
```
Setting up the buttons in Vanilla JavaScript →
```auto
/* 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 →
```auto
/* 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 →
```auto
/* 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;
retrieveAnswer(id);
}
const pick2 = () => {
let id = document.querySelector('#currentQuestion').getAttribute('data-record');
choice = 2;
retrieveAnswer(id);
}
const pick3 = () => {
let id = document.querySelector('#currentQuestion').getAttribute('data-record');
choice = 3;
retrieveAnswer(id);
}
const pick4 = () => {
let id = document.querySelector('#currentQuestion').getAttribute('data-record');
choice = 4;
retrieveAnswer(id);
}
```
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 - [https://www.fanoflego.com/trivia.php](https://www.fanoflego.com/trivia.php)
Full JavaScript Code can be found here → [fanoflego/trivia.js at main · Strider64/fanoflego · GitHub](https://github.com/Strider64/fanoflego/blob/main/assets/js/trivia.js)
---
You can really get creative with creative buttons, but it’s also gets a little more in-depth.
```auto
/* Populate Question, Create Answer Buttons */
const createQuiz = (gameData) => {
startTimer(dSec);
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'));
gameButton.id = '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(" "));
gameButton.style.pointerEvents = "none"; // Disable Click on Empty Field
}
});
};
```
This version of the game can be found here - [Trivia Game](https://www.fanoflego.com/game.php)
Full code of JavaScript of this version - [fanoflego/game.js at main · Strider64/fanoflego · GitHub](https://github.com/Strider64/fanoflego/blob/main/assets/js/game.js)