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
<div class="div" style="display: block;">
<button class="standart">Evet</button>
<button class="standart">Hayır</button>
<button class="standart">Dizin</button>
</div>
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
No
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
<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>
</div>
Now I can implement show and hide as below.
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
<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>
<div id="buttonContainer"></div>
</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>
</div>
</div>
</div>
</div>
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;
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
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) => {
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
Full code of JavaScript of this version - fanoflego/game.js at main · Strider64/fanoflego · GitHub