Function on button click - javascript

I'm in the middle of a tic tac toe game project I need to make a button in Javascript that will appear after the end of the round and which, when pressed, will start a new round.
I thought to make a function under click to remove a given class from the DOM. But I don't know how to do it. Can someone check and help?
I made an alert that is displayed after the end of the game but I need the game to reset
if (winCheck('playerOne', slots)) {
gameTitle.innerHTML = 'You Won!'
let btn = document.createElement('button')
btn.innerHTML = 'Lets Play Again'
btn.id = 'resetBtn'
btn.onclick = function () {
document.getElementById('resetBtn').remove()
}
document.body.appendChild(btn)
return
}

Inside the function you attribute to that button you could use the document.getElementsByClassName, store that value in a variable and iterate over the result removing the class from each element.
It would look something like this: Replit - Programatic Global Class Removal
I hope this does the trick for you!

Related

Videos should appear on same page after after going back to previous page

In the code I am working on, the video is not reappearing after it is removed, why is this, and is there a way for that to be fixed or adjusted in the code so that the videos will appear after going back to a previous page?
To reproduce, click on a button to enter a container, then the blue play button, then the exit button, then enter the same button again, the video has not reappeared.
code https://jsfiddle.net/wzaknd08/
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function (wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
In the demo code here click on the same play button multiple times.
You will see the video stays reappearing.
https://jsfiddle.net/g1ztucmp/
How would that be fixed in the code I am working on so that the videos appear again after going back to view the same videos after they are removed.
Like how it works in the demo code I provided.
You are adding a class to wrap called active when you press the play button.
function showCover(playButton) {
const cover = playButton.parentElement;
cover.classList.add("active");
}
However, you never remove that class when closing the player(s). So when closing the player you need to remove the active class again. This is best done in the removePlayer function as you already iterate though al the classes that might have them.
function removePlayer(wrapper) {
wrapper.player.destroy();
wrapper.classList.remove("active");
delete wrapper.player;
console.log("removePlayer");
}
Change you Fiddle to make it work: https://jsfiddle.net/wqchdey1/. Only change was me adding wrapper.classList.remove("active"); to the removePlayer function

Calling function with no return value from getElementById().innerHTML ??? Is it possible ? how?

Hi great coding community,
I was struggling here for the whole weekend with this question in my head. I am trying to call a function within document.getElementBy... element but I am still getting undefined output. Well, I got the output from the function, but only if I put there a return value into the LoginFunction(). Otherwise only undefined.
But problem is, that this function is not returning anything. I'm just creating the buttons with it. (Maybe it should return something, but I designed it so poorly :D)
Anyway, my aim is to create a buttons into newly created div tag. I know that with return value (at least with simple text) it works. I got text within the new div. But without return value, nothing happened. And I tried these options:
// creating div, with id or with class - doesnt matter.
global_div = document.createElement("div");
// global_div.classList.add("two");
global_div.id = "two";
// appending it into the body.
document.body.appendChild(global_div);
// now calling the function:
document.getElementById('two').innerHTML = LoginFunction();
document.getElementsByClassName('two')[0].innerHTML = LoginFunction();
document.getElementById('two').call = LoginFunction();
document.getElementsByClassName('two')[0].call = LoginFunction();
document.getElementById('two').innerText...
document.body.appendChild(global_div);
and other options, versions, combinations... nothing helped.
The LoginFunction() is:
function LoginFunction() {
console.log("LoginFunction called")
var myLoop_var;
let outcome;
<!-- START BUTTON -->
let btn = document.createElement("button");
btn.innerHTML = "START";
btn.id = "start";
document.body.appendChild(btn);
btn.addEventListener("click", function () {
btn.disabled = true;
btn2.disabled = false;
console.log("START BUTTON clicked");
clearInterval(global_var);
global_var = setInterval(function(){myLoop()}, 1000);
console.log('MY LOOP VAR: ', global_var);
});
}
There are two other buttons with more less same code. So I am waiting for the click on the buttons. So basically they are not returning anything.
And in short, I want to click on one button which create a three new buttons in one div. Then, when I click on the same button, all three buttons are removed together with created div.
I would be really appreciating if somebody could give me a hint or lead me on the right way with this.
Many thanks to all of you. :)
ok sorry, that's my poor explanation skill as well. Pictures maybe helped more.
This is start:
This is after buttons are created:
And my dreamed result:
<div id="two">
<button id="start">START</button>
<button id="stop" disabled="">STOP</button>
<button id="stop" disabled="">STOP</button>
</div>
No, you can not call function with innerHTML as you are doing.
As per your way, innerHTML means you need to provide whole HTML string with all three buttons inclued which should be returned by function.
e.g
Elem.innerHTML = func()
func(){
return "<HTML string with all buttons tag />"
}
Another way, when you click on button, just call your function which perform adding of all buttons in parent div and append it, so you won;t bother about innerHTML or return values.
e.g
onclick="func()"
func(){
div_elem.append(buttons) // on innerHTML
}

how to change onlick event of a button depending on what page user is on

i want to be able to toggle between the start page and the high scores page of my game with the same button, but i'm not sure what kind of loop to use. my current code is cumbersome and ends up taking the user back to the start page with a dead high scores link. picture of game
highScores.on("click", function(event) {
event.preventDefault();
contentDiv.html(highScoresDiv);
highScores.text("Back to Game");
highScores.on("click", function(event) {
event.preventDefault();
contentDiv.html(startDiv.html());
containerDiv.attr("style", "text-align: center");
highScores.text("View High Scores");
})
})
Use two buttons and depending on the event (click) you enable one and disable the other. With a flag.For example in angular you can use something like the * ngIf inside the html.
<button *ngIf="flag" (click)="function1()">Start</button>
<button *ngIf="!flag" (click)="function2()">Back to Game</button>
funcion1(){
//Start code
this.flag = !this.flag;
}
funcion2(){
//Back to game code
this.flag = !this.flag;
}

Button states in quiz application

I am making a quiz similar to buzzfeed quizzes like THIS. I have the logic planned out and I can kind of see how I'm supposed to code it to act similarly to the one in the link, but I have a problem with the button states.
Here is a fiddle of my code: sample quiz
$(document).ready(function () {
$('#btn1, #a1').click(function () {
$('#a1').removeClass("fadeout");
$('#a1').addClass("highlight");
$('#a2').removeClass("highlight");
$('#a3').removeClass("highlight");
$('#a4').removeClass("highlight");
$('#a5').removeClass("highlight");
$('#a6').removeClass("highlight");
$('#a2').addClass("fadeout");
$('#a3').addClass("fadeout");
$('#a4').addClass("fadeout");
$('#a5').addClass("fadeout");
$('#a6').addClass("fadeout");
btn1.checked = "true";
btn2.checked = "";
btn3.checked = "";
btn4.checked = "";
btn5.checked = "";
btn6.checked = "";
window.alert(document.write(getElementById("btn1").value));
Coding a single question does not seem to be a problem with the ff: change color on hover, reduce opacity of other choices, change to color blue once selected, etc... but as I add more questions, I realized I would have to use addClass and removeClass for the button's effects for every choice for every question, which, as you can see, wouldn't be so practical to code.
Are there any other more efficient ways to do this?
Using the click event of the question div you can apply the classes by using the $this keyword.
$(document).ready(function () {
$('.a_choice').click(function () {
$(this).siblings().removeClass("highlight");
$(this).siblings().addClass("fadeout");
$(this).children('input').prop('checked', true);
$(this).addClass('highlight');
$(this).removeClass("fadeout");
});
});
See http://learn.jquery.com/javascript-101/this-keyword/
Add a class to each button and get them by class instead of by id
$('.quizbuttons').removeClass("fadeout");
The buttons should have the class "quizbuttons" like:
<button class="quizbuttons"></button>
Or whatever element you are using.
Best.

Javascript for submitting form button

I want to produce buttons through Javascript that can also do the form function. Here is how i am doing but my form function does not work when i click. Please help me out on this.
External Javascript
var onef
onef="Apple"
var twof
twof="Orange"
Now this is what i am doing in HTML page
<script>
document.write("<button>")
document.write(onef)
onClick=("this.form.T4.value++;")
</script>
<script>
document.write("<button>")
document.write(twof)
onClick=("this.form.T5.value++;")
</script>
The script works right but onClick function not working.
ouldn't you have to do this:
<script>
document.write("<button ")
document.write('onClick="this.form.T4.value++;">')
document.write(onef)
document.write("</button>")
</script>
What you are doing in your original code is building the string "<button>apple" and creating a variable called onClick with a value of "this.form.T4.value++;". What I believe you need to do is build a string with the whole button tag in it, which is what the code above is doing.
I have never seen code like this before for creating a button with JavaScript. I would go with something more like this;
var onef ="Apple";
var twof ="Orange";
function createButton(context, func, text){
var button = document.createElement("input");
button.type = "button";
button.value = text;
button.onclick = func;
context.appendChild(button);
}
createButton(document.body, function(){ this.form.T4.value++; }, onef);
createButton(document.body, function(){ this.form.T5.value++; }, twof);
An example can be seen here http://jsfiddle.net/4yV4V/
This gives you some reusable code for creating the button and passing in what ever you want the onclick even to be. Also you could customise this code for other situations.

Categories

Resources