is it possible to create script that click multiple buttons in a row with x time interval between clicks ?
for example when first button is clicked after x time second is clicked and etc.
(using Javascript).
var inputs = document.getElementsByClassName('className');
for(var i=0; i<inputs.length;i++) {
setInterval(function()
{inputs[i].click() },1000
}
use this code
var allButtons = document.getElementsByClassName("button")
var timeInterval = 5000 // x time in miliseconds
function pressButton(iteration=0){
setTimeout(function(){
allButtons[iteration].click();
pressButton(iteration++);
}, timeInterval)
}
pressButton();
<div id="parent">
<button class="button" type="submit" > </button>
<button class="button" type="submit" > </button>
<button class="button" type="submit" > </button>
<button class="button" type="submit" > </button>
<button class="button" type="submit" > </button>
</div>
More can be helped if you paste your code
var clickcallback = function(i) {
setTimeout(function() {
let id = "button" + i;
document.getElementById(id).click();
}, 1000); // one second
if(i <= 3) {
clickcallback(i+1);
}
};
<div>
<button id="button1" onClick="alert('click button1');">Button 1</button>
<button id="button2" onClick="alert('click button2');">Button 2</button>
<button id="button3" onClick="alert('click button3');">Button 3</button>
</div>
Here the demo:
https://jsfiddle.net/frasim/730xmhfv/8/
Related
So I have 30 buttons (id="button1" to "button30"):
<button type="button" class="buttons" id="button1">1</button>
and I set up some JS so that the button changes colors on every click:
let index = 0;
const colors = ['green', 'red', '#405cf5'];
let btn = document.querySelector('#button1');
document.querySelector('#button1').addEventListener('click', function(){
btn.style.backgroundColor = colors[index];
index = index >= colors.length - 1 ? 0 : index + 1;
})
I'm not sure how to set this up so that all my buttons do this without copy and pasting and manually typing out the ID each time.
Delegate, please.
Here I find the closest static container of the buttons (if no container use document) and any click inside the container is checked against the thing we want clicked - you can test against any valid selector.
let index = 0;
const colors = ['green', 'red', '#405cf5'];
document.getElementById("buttonContainer").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.matches("button.buttons")) {
tgt.style.backgroundColor = colors[index++ % colors.length];
}
})
<div id="buttonContainer">
<button type="button" class="buttons" id="button1">1</button>
<button type="button" class="buttons" id="button2">2</button>
<button type="button" class="buttons" id="button3">3</button>
</div>
If there are other buttons not to be affected we can use a class
let index = 0;
const colors = ['green', 'red', '#405cf5'];
document.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.matches("button.buttons")) {
tgt.style.backgroundColor = colors[index++ % colors.length];
}
})
<button type="button" class="buttons" id="button1">1</button>
<button type="button" class="buttons" id="button2">2</button>
<button type="button" class="buttons" id="button3">3</button>
<button class="otherbutton">Dont color me</button>
I not sure if this supper basic or not but I am trying to add number values to some buttons through onclick functions. All done in html and javascript.
It can display the numbers fine but doesn't seem to make the numbers have any values to them if that makes sense. I just keep getting null values. Is it because of all the onclick events?
Below is the html.
var getvaule7.value = document.getElementsByClassName("7");
getvaule7.value = 7;
var getvaule8 = document.getElementsByClassName("8");
getvaule8.value = 8;
var getvaule9 = document.getElementsByClassName("9");
getvaule9.value = 9;
var getvaule4 = document.getElementsByClassName("4");
getvaule4.value = 4;
var getvaule5 = document.getElementsByClassName("5");
getvaule5.value = 5;
var getvaule6 = document.getElementsByClassName("6");
getvaule6.value = 6;
var getvaule1 = document.getElementsByClassName("1");
getvaule1.value = 1;
var getvaule2 = document.getElementsByClassName("2");
getvaule2.value = 2;
var getvaule3 = document.getElementsByClassName("3");
getvaule3.value = 3;
var getvaule0 = document.getElementsByClassName("0");
getvaule0.value = 0;
function number7() {
document.getElementById("show").value = getvaule7.value;
}
console.log(number7());
function number8() {
document.getElementById("show").value = getvaule8.value;
}
function number9() {
document.getElementById("show").value = getvaule9.value;
}
function number4() {
document.getElementById("show").value = getvaule4.value;
}
function number5() {
document.getElementById("show").value = getvaule5.value;
}
function number6() {
document.getElementById("show").value = getvaule6.value;
}
function number1() {
document.getElementById("show").value = getvaule1.value;
}
function number2() {
document.getElementById("show").value = getvaule2.value;
}
function number3() {
document.getElementById("show").value = getvaule3.value;
}
function number0() {
document.getElementById("show").value = getvaule0.value;
}
<body>
<h1 style="text-align: center;">
Graphing Calculator from Scratch
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" name="" id="show">
</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="row one" ><button type="button" class="7" onclick="number7()" value=7> 7</button>
<button type="button" class="8" onclick="number8()" >8</button>
<button type="button" class="9" onclick="number9()">9</button>
</div>
<div id="row two"><button type="button" class="4" onclick="number4()">4</button>
<button type="button" class="5" onclick="number5()">5</button>
<button type="button" class="6" onclick="number6()">6</button>
</div>
<div id="row three"><button type="button" class="1" onclick="number1()">1</button>
<button type="button" class="2" onclick="number2()">2</button>
<button type="button" class="3" onclick="number3()">3</button>
</div>
<button type="button" class="0" onclick="number0()">0</button>
<button type="button" class=".">.</button>
<button type="button" class="𝝅">𝝅</button>
<div id="row 5">
<div id="row 5"><button type="button" class="+/-">+/-</button>
<div id="row 5"><button type="button" class="+">+</button>
<div id="row 5"><button type="button" class="-">-</button>
<button type="button" onclick="enter()" >=</button>
</div>
<br>
<button onclick="document.getElementById('show').value = ''" style="text-align:center;">Clear input field</button>
</div>
</div>
</div>
</div>
</body>
</html>
First, the way you are going about it is not the best way to do it but since you are just getting started I will not confuse you and just correct your code instead.
There are a couple of errors in your code
button does not have value it has innerText property. value property
is for input tags only.
use += when you are trying to set value to
show input since = will erase what was in it before hands.
you have not defined enter() function that was it gives you that error you
have to create enter function first
another thing is document.getElementsByClassName("7") does not retun one element like getElementById but it returns an array that is why if you are using gelementsByClassName you have to also write [number] where number is the index of your element in the returned array. in your case number is 0 which means the first element in the array.
another one is you dont need to use getValue7.value = document.get... since you are using it just for storing the element you can just use getValue = document.getlE.....
and you html tag nesting was incorrect please nest them correctly.
To help you understand the correct solution. I wrote minimum code for you project down below. please compare it with your code to see what is wrong,
var getvaule7 =document.getElementsByClassName("7")[0];
var getvaule8 =document.getElementsByClassName("8")[0];
var getvaule9 =document.getElementsByClassName("9")[0];
var getPlus = document.getElementsByClassName("plus")[0];
function number7(){
document.getElementById("show").value += getvaule7.innerText;
}
function number8(){
document.getElementById("show").value += getvaule7.innerText;
}
function number9(){
document.getElementById("show").value += getvaule7.innerText;
}
function plus(){
document.getElementById("show").value += getPlus.innerText;
}
function enter(){
document.getElementById("show").value = eval(document.getElementById("show").value);
}
<h1 style="text-align: center;">
Graphing Calculator from Scratch
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" name="" id="show">
</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="row one" >
<button type="button" class="7" onclick="number7()" value=7>7</button>
<button type="button" class="8" onclick="number8()" >8</button>
<button type="button" class="9" onclick="number9()">9</button>
</div>
<div id="row 5">
<button type="button" onclick="plus()" class="plus">+</button>
<button type="button" onclick="enter()" >=</button>
</div>
<br>
<button onclick="document.getElementById('show').value = ''" style="text-align:center;">Clear input field</button>
function load() {
let num7=document.getElementById("7").addEventListener('click',()=>{
document.querySelector(".show").value+=7;
})
let num8=document.getElementById("8").addEventListener('click',()=>{
document.querySelector(".show").value+=8;
})
var userEnter1= parseInt(document.querySelector(".show").value);
var userEnter2=parseInt(document.querySelector(".show").value);
[0]
// HOW TO MAKE SURE THAT A USER CAN INPUT ANOTHER DATA AFTER PRESSING THE +
let add=document.getElementById("add").addEventListener('click',()=>{
document.querySelector(".show").value+="+";
userEnter1+userEnter2;
})
const equals=document.getElementById("equals").addEventListener('click',()=>{
console.log( userEnter1+userEnter2);
});
}
window.onload = load;
}
window.onload = load;
<body>
<h1 style="text-align: center;">
Graphing Calculator from Scrach
</h1>
<div id="Text box" style="text-align: center;">
<input type="text" class="show" id="clear">
</div>
<br></br>
<div style="text-align:center" id="click-row">
<div id="activate" >
<div id="row one">
<input type="Button" id="7" class="num7" value="7" > </input>
<input type="Button" id="8" value="8" > </input>
</div>
<div id="row 2">
<input type="Button" id="add" value="+" onclick="" > </input>
<input type="Button" id="equals" value="=" > </input>
</div>
</div>
<br>
<button onclick="document.getElementById('clear').value = ''" style="text-align:center;">Clear input field</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have 10 buttons 0-9. I want to print out all the numbers of the buttons in order of their 'click'. For example, If I click on buttons 5,4,3,2,1 then it should be printed like 54321 but with my coding it is printing in ascending order only. Can anybody help me figure this one out?
function nmbr0(){
var displaySpan = document.getElementById('result0');
displaySpan.innerHTML = 0;
}
function nmbr1(){
var displaySpan = document.getElementById('result1');
displaySpan.innerHTML = 1;
}
function nmbr2(){
var displaySpan = document.getElementById('result2');
displaySpan.innerHTML = 2;
}
<button type="button" onClick="nmbr0()"> 0 </button>
<button type="button" onClick="nmbr1()"> 1 </button>
<button type="button" onClick="nmbr2()"> 2 </button>
You have entered
<span id="result0"></span>
<span id="result1"></span>
<span id="result2"></span>
This is my output after clicking on 4321:
The problem is that the spans are already defined in ascending order, so even if you print 2 before 1, it'll still go inside the 'result2' span.
<span id="result0"></span>
<span id="result1"></span>
<span id="result2"></span>
How about this alternate instead?
<button type="button" onClick="print(this)"> 0 </button>
<button type="button" onClick="print(this)"> 1 </button>
<button type="button" onClick="print(this)"> 2 </button>
You have entered
<span id="displaySpan"></span>
<script>
var displaySpan = document.getElementById('displaySpan')
function print(button){
displaySpan.innerHTML += button.innerHTML
}
</script>
First, you don't have to create a function for each button number because you can use selector for that. Look a simple solution for that:
var element = "";
$("button").click(function() {
element += $(this).html(); //Get the button number
$("#result").html(element);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<div>
<strong>You have entered:</strong> <span id="result"></span>
</div>
Your code was behaving unexpectedly becase you were using ids for each button text display, so the order was already predefined in them from 0-10.
You can append the numbers to the html itself like below
function nmbr(num){
var displaySpan = document.getElementById('numbers');
//appending one after another
displaySpan.innerHTML += num + ' ';
}
You have entered<br>
<span id="numbers"></span>
<br>
<button type="button" onClick="nmbr('0')"> 0 </button>
<button type="button" onClick="nmbr('1')"> 1 </button>
<button type="button" onClick="nmbr('2')"> 2 </button>
<button type="button" onClick="nmbr('3')"> 3 </button>
<button type="button" onClick="nmbr('4')"> 4 </button>
Using vanilla JavaScript :
function showButtonClicked ()
{
// Get the output node
let output = document.querySelector( '.output' );
// Get the buttons parent and add a click event on it
document.querySelector( '.buttons' ).addEventListener( 'click', () => {
// Get the clicked element
let target = event.target;
// If it is not a button, return
if ( target.nodeName !== 'BUTTON' ) return;
// Add the button number to the output
output.textContent += ` ${ target.textContent }`;
});
}
showButtonClicked();
<div class="buttons">
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
</div>
<p>You have entered : </p>
<div class="output"></div>
I have 2 <div>s of at least 81 buttons, all with the same class, but they have different ids and names. I am trying to figure out how to alert the name of the current button that was being pressed.
function runMe(e){
return function(){
console.log(e.getAttribute("id"));
}
}
var eles = document.getElementsByClassName("myButton")
Array.prototype.forEach.call(eles,function(ele){
ele.onclick = runMe(ele);
})
<button id="a1" class="myButton">A1</button>
<button id="b2" class="myButton">B2</button>
Get all the buttons with the same class name and assign the click event listener to each buttons so that when you click the button the listener is invoked:
function btnClick(){
console.log(this.id + " " + this.name);
}
var allButtons = document.getElementsByClassName('myButton');
for(i=0; i<allButtons.length; i++){
allButtons[i].addEventListener('click', btnClick);
}
<button id="1" class="myButton" name='name1'>B1</button>
<button id="2" class="myButton" name='name2'>B2</button>
<button id="3" class="myButton" name='name3'>B2</button>
<button id="4" class="myButton" name='name4'>B2</button>
<button id="5" class="myButton" name='name5'>B2</button>
You can try the following way by using this.name inside the click handler function:
var btns = document.querySelectorAll('button');
btns.forEach(function(btn){
btn.addEventListener('click', function(){
console.log('Name of the cliked button is:', this.name)
})
})
<div>
<button type="button" id="btn1" name="btnName1">Button 1</button>
<button type="button" id="btn2" name="btnName2">Button 2</button>
<!--------- More Buttons--------->
</div>
<div>
<!--------- More Buttons--------->
<button type="button" id="btn48" name="btnName48">Button 48</button>
<button type="button" id="btn49" name="btnName49">Button 49</button>
<button type="button" id="btn50" name="btnName50">Button 50</button>
<!--------- More Buttons--------->
</div>
I'm trying to get a specific h3 from a cloned div when pressing a button. Since I got 10 cloned divs with the exact same values I want to be able to get the h3 from the specific button I just pressed.
$("body").on("click", ".btnFavorite", function() {
var favoriteMovieTest = $(this).parent().find("h3");
alert(favoriteMovieTest);
});
for (var i = 0; i < 10; i++) {
$(".search-result:first").clone().appendTo(".search");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<div class="search-result">
<h3>Titel(year)</h3>
<input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
<input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
</div>
</div>
You can do it like this:
for (var i = 0; i < 10; i++) {
$(".search-result:first").clone().appendTo(".search");
}
$(".btnFavorite").on("click", function() {
var favoriteMovieTest = $(this).closest("div").find("h3");
favoriteMovieTest.css('color','red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<div class="search-result">
<h3>Titel(year)</h3>
<input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
<input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
</div>
</div>
As you can see i get that specific h3 element from the button.
Now you can do whatever you like with it, for example manipulate it's CSS code to change the color, like I did.
Try this.
Note : Keep code to attach event handler after for loop because if it is executed before for loop, elements created by for loop won't be attached with a event handler.
for (var i = 0; i < 10; i++) {
$(".search-result:first").clone().appendTo(".search").find("h3").append(" "+i);
}
$(".btnFavorite").on("click", function() {
var favoriteMovieTest = $(this).siblings("h3")[0];
console.log(favoriteMovieTest);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<div class="search-result">
<h3>Titel(year)</h3>
<input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
<input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
</div>
</div>
You can climb up and down the DOM to get and title or index number of which cloned element was clicked.
$("body").on("click", ".search .btnFavorite", function(e) {
var elIndex = Array.from(e.target.parentNode.parentNode.children).indexOf(e.target.parentNode);
var favoriteMovieTest = e.target.parentNode.innerText;
alert('H3: ' + favoriteMovieTest + ' index: ' + elIndex);
});
for (var i = 0; i < 10; i++) {
$(".search-result:first").clone().appendTo(".search");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
<div class="search-result">
<h3 id='title'>Title(year)</h3>
<input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite">
<input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
</div>
</div>