Simple Javascript enable/disable button program? - javascript

I want a simple program that basically enables/disables buttons as each button is pressed.
So, there are three buttons. The left button is enabled at the start of the program and I want to disable it and enable the button next to it onclick. The same when I press on the second button.
Can anyone show me where I'm going wrong in my code?
<html>
<head>
<button id="func1" onclick="func(1)">func 1</button>
<button id="func2" disabled="false" onclick="func(2)">func 2</button>
<button id="func3" disabled="false" onclick="func()">func 3</button>
</head>
<body>
<script>
var number = '';
function func(number)
if(number == '1'){ //Sets button setting to disabled or enabled when wanted
after particular parts of the program are run.
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = false;
document.getElementById('output').disabled = true;
}
else if(number == '2'){
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = true;
document.getElementById('func3').disabled = false;
}
</script>
</body>
</html>
Thanks again :)

First things first, you need to move the buttons from <head> to <body>.
Now on to the problem at hand: your function was missing the {} brackets around it and your comment was broken into two lines, the second of which was causing a syntax error. Should work now:
<button id="func1" onclick="func(1)">func 1</button>
<button id="func2" disabled="false" onclick="func(2)">func 2</button>
<button id="func3" disabled="false" onclick="func()">func 3</button><script>
function func(number){
if(number == '1'){ //Sets button setting to disabled or enabled when wanted after particular parts of the program are run.
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = false;
document.getElementById('output').disabled = true;
}
else if(number == '2'){
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = true;
document.getElementById('func3').disabled = false;
}
}
</script>

I think better to use something universal, like this:
<html>
<body>
<button class="myButton" onclick="myHandler(this)" >func 1</button>
<button class="myButton" onclick="myHandler(this)" disabled>func 2</button>
<button class="myButton" onclick="myHandler(this)" disabled>func 3</button>
<script>
function myHandler (e) {
// Toggle disabled property of current button.
e.disabled = !e.disabled;
// Toggle disabled property for next sibling if it has class 'myButton'.
if (e.nextElementSibling.className === 'myButton') {
e.nextElementSibling.disabled = !e.nextElementSibling.disabled;
// Otherwise toggle first button with class 'myButton'.
} else {
var b = document.getElementsByClassName('myButton')[0];
b.disabled = !b.disabled;
}
}
</script>
</body>
</html>

Related

Click button containing some text

I want to create a "script" to click in a button everytime it contains 'PLACE BET'
i could do that easy with classes, but the problem is the button have the same classes, only thing different is the text.
<button type="button" name="button" style="z-index:10;" class="place_bet crash-button-bet bet_placed">PLACE BET</button>```
when i click:
```<button type="button" name="button" style="z-index:10;" class="place_bet crash-button-bet bet_placed">BETTING (44) (click to cancel)</button>```
if i understood you right you wanna add a event listener which change the inner HTML of The button.
If so:
<script>
function changeButton(){
if (document.getElementById('btnplacebet').textContent == "PLACE BET")
{
document.getElementById('btnplacebet').textContent = "BETTING (44) (click to cancel)";
}
else
{
document.getElementById('btnplacebet').textContent = "PLACE BET";
}
}
</script>
<button onclick="changeButton()" id="btnplacebet" type="button" name="button" style="z-index:10;" class="place_bet crash-button-bet bet_placed">PLACE BET</button>```
<script>
function changeButtonText(){
if (document.getElementById('btn-id').textContent == "PLACE BET")
{
document.getElementById('btn-id').textContent = "CLICK TO CANCEL";
}
else
{
document.getElementById('btn-id').textContent = "PLACE BET";
}
}
</script>
<button onclick="changeButtonText()" id="btn-id" type="button">PLACE BET</button>

how to call one javascript function from several similar html events

i'm calling this javascript function from a button inside html but i need to replicate the button in several places. Using the same javascript function for all the buttons doesn't seem possible to me as it kept performing the action on the first button alone, i tried renaming the function by adding digits but that will be stressful and make my code excessively bulky.
please help.
//HTML button
<a href="#" title="Comment" class="lk-btn" onclick="openForm()">
// button 1
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
// button 2
function openForm1() {
document.getElementById("myForm1").style.display = "block";
}
function closeForm1() {
document.getElementById("myForm1").style.display = "none";
}
//button 3
function openForm2() {
document.getElementById("myForm1").style.display = "block";
}
function closeForm1=2() {
document.getElementById("myForm1").style.display = "none";
}
You can call the same function from multiple buttons this way.
You have to assign an id to each button in your HTML code and pass it to your javascript function when you call it.
HTML Code
<button type="button" onclick="openForm(this)" id="1">Button1</button>
<button type="button" onclick="openForm(this)" id="2">Button2</button>
<button type="button" onclick="openForm(this)" id="3">Button3</button>
JS Function
function openForm(elem) {
alert("Calling openForm() from Button " + elem.id);
}
Update : To use without assigning the IDs
<button type="button" onclick="openForm()" >Button1</button>
<button type="button" onclick="openForm()" >Button2</button>
<button type="button" onclick="openForm()" >Button3</button>
function openForm() {
alert("Calling openForm()");
}

Change website background with JavaScript not working

Okay, I want to change my website background with JavaScript. Ideally with a drop down menu, but for now, buttons.
This works:
function selText(test){
var arr = document.getElementById(test).value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (document.getElementById('btnim2')){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.id)">text</button>
<button id="btnim2" value="2" onclick="selText(this.id)">more text</button>
However, if I set my 'else if' to arr == 2 and both buttons have the same id (btnim) it doesn't work, and I don't know why. I feel like I am missing something simple. What am I doing wrong?
if you use arr==2 and id remains btnim2 of button 2 it will still work. You can't have same id's of many elements in webpage because it will confuse the javascript compiler to target which element.
function selText(test){
var arr = document.getElementById(test).value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (arr==2){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.id)">text</button>
<button id="btnim2" value="2" onclick="selText(this.id)">more text</button>
There is another way to make this code work by passing the value of the button instead of id.
function selText(test){
var arr = test;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (arr==2){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.value)">text</button>
<button id="btnim2" value="2" onclick="selText(this.value)">more text</button>
Send the button itself as parameter instead:
<script type="text/javascript">
function selText(button){
var arr = button.value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
} else if (arr == 2) {
document.body.style.background = 'none';
}
}
</script>
<button id="btnim" value="1" onclick="selText(this)">text</button>
<button id="btnim2" value="2" onclick="selText(this)">more text</button>

Why is my removeEventListener not working?

My javascript code, thanks in advance (let me know if you need the html too but its basically the tags, it's a game where the players just click until it reaches a certain number, and whoever reaches first wins. I'm trying to stop the other player from clicking if the game has already been won:
var player1Score=0;
var player2Score=0;
function p1Function(){
if(player1Score==document.querySelector("input").value)
return;
++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
if(player1Score==document.querySelector("input").value)
document.querySelector("#pOneScore").style.color="green";
}
function p2Function(){
if(player2Score==document.querySelector("input").value)
{
document.querySelector(".playerOne").removeEventListener("click",
p1Function);
return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
if(player2Score==document.querySelector("input").value)
document.querySelector("#pTwoScore").style.color="green";
}
function resetFunction(){
document.querySelector("input").value=5;
document.querySelector("#pOneScore").style.color="black";
document.querySelector("#pTwoScore").style.color="black";
player1Score=0;
player2Score=0;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);
Here is the HTML code as requested:
<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>
<input type="text" name="score" value="5"></input>
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>
<script src="scorekeeper_js"></script>
</body>
You didn't remove listener in one of your onclick functions.
function p1Function() {
var maxScore = document.querySelector("input").value;
player1Score++;
if (player1Score == maxScore) {
document.querySelector("#pOneScore").style.color = "green";
document.querySelector(".playerTwo").removeEventListener("click",
p2Function);
document.querySelector("#pOneScore").innerHTML = player1Score.toString();
} else if (player1Score < maxScore) {
document.querySelector("#pOneScore").style.color = "black";
document.querySelector("#pOneScore").innerHTML = player1Score.toString();
}
}
function p2Function() {
var maxScore = document.querySelector("input").value;
player2Score++;
if (player2Score == maxScore) {
document.querySelector("#pTwoScore").style.color = "green";
document.querySelector(".playerOne").removeEventListener("click",
p1Function);
document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
} else if (player2Score < maxScore) {
document.querySelector("#pTwoScore").style.color = "black";
document.querySelector("#pTwoScore").innerHTML = player2Score.toString();
}
}
You also have to add listeners back in reset():
function resetFunction() {
...
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
}
Here is working jsfiddle code:
https://jsfiddle.net/1we2ydza/1/
Check it now
var player1Score=0;
var player2Score=0;
function p1Function(){
if(player1Score==parseInt(document.querySelector("input").value)){
document.querySelector(".playerTwo").removeEventListener("click",
p2Function);
return;
}
++player1Score;
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
if(player1Score==document.querySelector("input").value)
document.querySelector("#pOneScore").style.color="green";
}
function p2Function(){
if(player2Score==parseInt(document.querySelector("input").value))
{
document.querySelector(".playerOne").removeEventListener("click",
p1Function);
return;
}
player2Score++;
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
if(player2Score==document.querySelector("input").value)
document.querySelector("#pTwoScore").style.color="green";
}
function resetFunction(){
document.querySelector("input").value=5;
document.querySelector("#pOneScore").style.color="black";
document.querySelector("#pTwoScore").style.color="black";
player1Score=0;
player2Score=0;
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector("#pOneScore").innerHTML=player1Score.toString();
document.querySelector("#pTwoScore").innerHTML=player2Score.toString();
}
document.querySelector(".playerOne").addEventListener("click", p1Function);
document.querySelector(".playerTwo").addEventListener("click", p2Function);
document.querySelector(".reset").addEventListener("click", resetFunction);
<body>
<strong><span id="pOneScore">0</span> to <span id="pTwoScore">0</span>
</strong>
<br>
<br>
<p>Playing To:</p> <span id="playing_to"></span>
<input type="text" name="score" value="5" />
<button class="playerOne">Player One</button>
<button class="playerTwo">Player Two</button>
<button class="reset">Reset</button>
<script src="scorekeeper_js"></script>
</body>
Once the 1st person clicks the 5, times then in the person one handler, the click handler for person two was not removed. Hence the person two was able to click. I think you hand missed to remove the click in 'p1Function()'. Adding the below lines in 'p1Function()' would solve your problem:
if(player1Score==document.querySelector("input").value)
{
document.querySelector(".playerTwo").removeEventListener("click",
p2Function);
return;
}

Javascript:Toggle Function is not working

I am trying to make a simple toggle but it is not working.And i want it done in javascript not in jquery.
Here is my javascript.
<script>
function showhide() {
if (document.getElementById(ptag).style.display = "block") {
document.getElementById(ptag).style.display = "none";
} else {
document.getElementById(ptag).style.display = "block";
}
}
</script>
Here is my HTML.
<input type="button" value="Show hide" onclick="showhide()">
<p id="ptag">Some text here.</p>
I need solution :(
Change your if condition to:
if(document.getElementById("ptag").style.display == "block"){
^^^^ string ^^^ double equals
And replace all other references of ptag to "ptag"
See working JSFiddle

Categories