Here is my code:
<html>
<body>
<script>
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
<button type="button" onClick="clickME()">Click me</button>
</body>
</html>
I'm trying to use this example I found:
<body>
<h1>Single click JS Button</h1>
<button type="submit" onClick="this.disabled = true; return true;">Submit</button>
</body>
I'm confused on how to use the onClick="this.disabled = true; part because for my code I already have the function called when I wrote onClick. I used onClick="clickMe().
Are you allowed to have onClick twice? I want to use the onClick="this.disabled = true; because I don't want to keep increasing the amount of clicks if the user clicks the button again. If they click it once I only want to increment once and then disable the button or just not increase the count after.
Note on possible duplicate
I do not think this is a duplicate of the other question, as that is jQuery click() only once, but I'm using JavaScript. I have not learned jQuery (jQuery click() only once)*
Please take a look here:
var clicks = 0;
function clickME(el) {
el.disabled = true;
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
<p>Clicks: <a id="clicks">0</a></p>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
<button type="button" onClick="clickME(this)">Click me</button>
addEventListener option once:true - looks like a perfect option in your case.
More explanations in the code
var clicks = 0
function clickME(event) {
clicks += 1
document.getElementById("clicks").innerText = clicks // innerText is more suitable in this case
if (event.target.className.includes(`auto-disable`)) {
event.target.disabled = true // auto disabling if you need it
}
}
document.querySelectorAll(`button`) // select all buttons
.forEach( // loop through the elements
// addEventListener with options once:true. once option designed exactly for your purposes, to fire event only once
el => el.addEventListener(`click`, clickME, {once: true})
)
<p>Clicks: <a id="clicks">0</a></p>
<button type="button">Click me</button>
<button type="button">Click me</button>
<button type="button" class="auto-disable">Click me</button>
<button type="button" class="auto-disable">Click me</button>
Related
<button class="btn" onclick="func(0)" value="">abc</button>
<button class="btn" onclick="func(1)" value="">def</button>
<button class="btn" onclick="func(2)" value="">ghi</button>
<script type="text/javascript">
function func(i){
var btn= document.getElementsByClassName("btn")[i];
console.log(btn);
btn.style.color="red";
}
</script>
I want to add new button every time, and want to display them on top. For adding them on top i need to change numbering till end
any solution to this. How new button[i] can be displayed on top
Subtract from the number of buttons to count from the end.
function func(i) {
var all_buttons = document.getElementsByClassName("btn");
all_buttons[all_buttons.length - i - 1].style.color = "red";
}
<button class="btn" onclick="func(2)" value="">abc</button>
<button class="btn" onclick="func(1)" value="">def</button>
<button class="btn" onclick="func(0)" value="">ghi</button>
Is it possible to create a function that returns which button was pressed, even though all buttons have the same class?
It is important that the classes of the buttons must not be changed.
<html>
<body>
<button class="button">text</button>
<button class="button">text</button> //this button was clicked
<button class="button">text</button>
</body>
</html>
The code is only for visualisation I know it isn't right.
function myfunction(){
console.log(clickedbutton)
}
What I have to fill in so the code runs?
Sorry for the bad code i don't know how to make it more clearly.
Hello and happy new 2021!
I think this might be a slight duplicate of this.
As Gabriele said, you can get the HTML element by using the target. If you need some logic for differentiating the structures (using them in some state later on), you would need to assign an id or a different class.
Delegate
document.getElementById("buttonDiv").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.classList.contains("button")) console.log(tgt.textContent,"clicked")
})
<div id="buttonDiv">
<button class="button">text 1</button>
<button class="button">text 2</button>
<button class="button">text 3</button>
</div>
When an event happens and the handler that is bound to that event for that element is called, it is passed the event as the first parameter. And one of the properties of the event is the target which points to the element that triggered the event.
so
function clickHandler(event) {
const clickedElement = event.target;
console.log(clickedElement.textContent);
}
document
.querySelectorAll('.button')
.forEach(button => button.addEventListener('click', clickHandler))
<button class="button">text 1</button>
<button class="button">text 2</button>
<button class="button">text 3</button>
If you assign a function to the onClick event of a button (or multiple buttons), you can receive the event info as an argument, like so:
function myfunction(e) {
console.log(e.target.id)
}
<!DOCTYPE html>
<html>
<body>
<button id="button-1" class="button" onclick="myfunction(event)">text</button>
<button id="button-2" class="button" onclick="myfunction(event)">text</button>
<button id="button-3" class="button" onclick="myfunction(event)">text</button>
</body>
</html>
You can make use of data-id for getting index of button clicked.
const button = document.querySelectorAll(".button");
function getClickedIndex(evt) {
console.log(evt.target.getAttribute("data-id"));
}
button.forEach(button => button.addEventListener('click', getClickedIndex))
<html>
<body>
<button class="button" data-id="1">text</button>
<button class="button" data-id="2">text</button>
<button class="button" data-id="3">text</button>
</body>
</html>
How can I create multiple onclick events for my html buttons? The code I have right now only implements it for one button. How can I get the script to change the image src to different images when the other buttons are clicked. I tried using different functions for each button but that didn't work.
*
<body>
<button class="button" onclick="myFunction()" ><strong>Objectives</strong></button>
<button class="button"><strong>Mission</button></strong>
<button class="button"><strong>Chemistry Vision</strong></button>
<button class="button"><strong>Environment Vision</strong></button></br>
<img id="myImg" src="http://image.png" >
<script>
function myFunction() {
document.getElementById("myImg").src = "http:Objectives.png";
}
</script>
</body>
*
You should pass parameter to the function, something like this:
<body>
<button class="button" onclick="myFunction('Objectives')" ><strong>Objectives</strong></button>
<button class="button" onclick="myFunction('Mission')"><strong>Mission</button></strong>
<button class="button" onclick="myFunction('Chemistry)"><strong>Chemistry Vision</strong></button>
<button class="button" onclick="myFunction('Environment')"><strong>Environment Vision</strong></button></br>
<img id="myImg" src="http://image.png" >
<script>
function myFunction(imgName) {
document.getElementById("myImg").src = "http:" + imgName + ".png";
}
</script>
</body>
I have a number of buttons within a section, each with an id of the form #balls-left-n, where n ranges from 1 to 15.
When one of these buttons is clicked, I want to grab the number from the id that was clicked and hide all of the buttons with ids that have names including numbers that are greater than the one clicked on.
So, if #balls-left-13 is clicked, I want to hide #balls-left-14 and #balls-left-15. But if #balls-left-3 is clicked I want to hide all the buttons from #balls-left-4 through #balls-left-15.
I'm a novice at web-dev so if I've made other mistakes or taken a poor approach don't hesitate to point that out.
I have a handler for each of the buttons (which if I knew more could probably be one function) that look like this:
$("#balls-left-14").click(function() {
var num_balls = $(this).attr('id').match(/[\d]/);
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
This didn't work and I get an error that num_balls is undefined, which I don't understand.
#balls-left is the section all of the buttons are inside of.
relevant HTML as requested
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
Hope this helps.
var exploded = id.split("-");
alert(exploded.pop());
Now, to use that concept on your HTML structure, you can do something like this:
$(document).ready(function() {
$(".x-balls-left").click(function(e) {
e.preventDefault();
var exploded = this.id.split("-");
alert(exploded.pop());
});
});
And here's a Fiddle you can play around with.
You might don't even need all of these if your elements to hide share the same parent. Just set class on click .selected and hide the rest using CSS .selected.x-balls-left ~ .x-balls-left {display: none;}
$('.x-balls-left').click(function() {
$(this).toggleClass('selected');
})
.selected.x-balls-left ~ .x-balls-left {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="balls-left">
<h2>How Many Balls are Left on the Table?</h2>
<button type="button" id="balls-left-2" class="x-balls-left">2</button>
<button type="button" id="balls-left-3" class="x-balls-left">3</button>
<button type="button" id="balls-left-4" class="x-balls-left">4</button>
<button type="button" id="balls-left-5" class="x-balls-left">5</button>
<button type="button" id="balls-left-6" class="x-balls-left">6</button>
<button type="button" id="balls-left-7" class="x-balls-left">7</button>
<button type="button" id="balls-left-8" class="x-balls-left">8</button>
<button type="button" id="balls-left-9" class="x-balls-left">9</button>
<button type="button" id="balls-left-10" class="x-balls-left">10</button>
<button type="button" id="balls-left-11" class="x-balls-left">11</button>
<button type="button" id="balls-left-12" class="x-balls-left">12</button>
<button type="button" id="balls-left-13" class="x-balls-left">13</button>
<button type="button" id="balls-left-14" class="x-balls-left">14</button>
<button type="button" id="balls-left-15" class="x-balls-left">15</button>
</section>
$(document).on('click', '.balls-left', function() {
var num = getNum(this);
$('.balls-left').each(function() {
var that = $(this);
var bnum = getNum(that);
if (bnum > num) {
that.show();
} else {
that.hide();
}
});
});
var getNum = function(elem) {
if (elem) {
return $(elem).attr('id').replace('balls-left-', '');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="balls-left-1" class="balls-left">Ball 1</div>
<div id="balls-left-2" class="balls-left">Ball 2</div>
<div id="balls-left-3" class="balls-left">Ball 3</div>
<div id="balls-left-4" class="balls-left">Ball 4</div>
<div id="balls-left-5" class="balls-left">Ball 5</div>
$("#balls-left button:gt(num_balls-2)").hide;
This is an invalid CSS selector, and only gets the hide method, without calling it. You want something like:
$("#balls-left button:gt("+(num_balls-2)+")").hide();
First you should put a class on each object so you can reference them all at once, and the simplest way to understand is to just put the ball number right in the tag as a custom attribute if you can:
<input type="button" id="balls-left-1" class="left-ball" num="1"/>
<input type="button" id="balls-left-2" class="left-ball" num="2"/>
etc...
Then you can write the javascript as follows:
$('.left-ball').click(function () {
var BallNum = $(this).attr('num');
$('.left-ball').each(function () {
if ($(this).attr('num') > BallNum) {
$(this).hide();
}
});
});
You can use RegEx match like this. This might resolve your undefined num_balls error message.
$("#balls-left-14").click(function() {
var ret = $(this).attr('id').match("[0-9]+");
var num_balls = ret[0];
j_end_balls_on_table = 14;
$("#balls-left button:gt(num_balls-2)").hide;
...
other stuff
...
});
Another way of doing it using your original HTML:
$('.x-balls-left').click(function () {
var BallNum = $(this)[0].innerHTML;
$('.x-balls-left').each(function () {
if ($(this)[0].innerHTML > BallNum) {
$(this).hide();
}
});
});
I just did it like this:
$('button[id^=balls-left-]').click(function(){
var num_balls = $(this).attr('id').match(/[\d]/);
$('#balls-left button:gt(' + num_balls + ')').hide();
});
Keep in mind that :gt select by index, it means that $('#balls-left button:gt(2)') will not select the button with id balls-left-2 but the one with id balls-left-4 (according to the html you posted).
Once my button gets clicked, it should get disabled and never be clicked again until the page is refreshed. Below is my code:
<html>
<head>
<script type="text/javascript">
function myButtonClicked()
{
alert("Has myButton got disabled? I need solution for this.");
}
</script>
</head>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked()">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked()">Click ME</button>
</body>
</html>
Before calling myButtonClicked function, it should get disabled. Actually, I want to write a PHP script in this function which will fetch some data from database which will take some time in real environment. That is why I want to disable the button. How do I achieve that?
You can pass this to your function:
<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>
then you can use:
function myButtonClicked(el)
{
el.disabled = true;
}
Fiddle Demo
with jQuery you can use .click() along with .prop():
$('button').click(function() {
$(this).prop('disabled',true);
});
Fiddle Demo
function myButtonClicked()
{
$(this).prop('disabled', true);
}
Is it helping?
Add -
function myButtonClicked()
{
alert("Has myButton got disabled? I need solution for this.");
this.disabled = true;
}
Give your element as an argument within calling teh function
<button type="button" id="myButton1" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this)">Click ME</button>
And set the element attribute "disabled" to true
function myButtonClicked(obj) {
obj.setAttribute("disabled", true);
}
fiddle: http://jsfiddle.net/quJX8/
JSBIN
$("button").click(function() {
$('#'+this.id).prop('disabled', true);
});
You can disable like this, this is self explainable:
<script>
function myButtonClicked(id)
{
alert("Has myButton got disabled? I need solution for this.");
$("#" + id).attr("disabled", true);
}
</script>
<body>
<button type="button" id="myButton1" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton2" onclick="myButtonClicked(this.id)">Click ME</button>
<button type="button" id="myButton3" onclick="myButtonClicked(this.id)">Click ME</button>
</body>
There are simpler ways than rewriting your function and passing "this". Just use "this" in your onclick attribute:
<button type="button" id="myButton1" onclick="this.disabled=true;myButtonClicked()">Click ME</button>
That will disable it, but it isn't necessarily that visibly obvious on the form. I like to use:
<button type="button" id="myButton1" onclick="this.style.visibility='hidden';myButtonClicked()">Click ME</button>
Which "disappears" it, but it still holds its place in the form.
If you don't need the placeholder, you can also use:
<button type="button" id="myButton1" onclick="this.hidden=true;myButtonClicked()">Click ME</button>