I am making a Simon game, but I need to get the "id" (attribute) value. but whenever I click on the different color it still gives me the first attr value which is in this case is green. how many times do I click on the red, blue, or yellow button but it still gives me a green value (the first one). help, please!
//Below code HTML
<div class="container">
<button class="btn green" id="green"></button>
<button class="btn red" id="red"></button><br />
<button class="btn yellow" id="yellow"></button>
<button class="btn blue" id="blue"></button>
</div>
//Below code Jquery
$(".btn").click(function () {
var userChosenColor =$(".btn").attr("id");
console.log(userChosenColor);
});
Reference to the button clicked.
You do not necessarily need jQuery for this.
$(".btn").click(function () {
var userChosenColor = $(this).attr("id");
console.log('jQuery: '+ userChosenColor);
});
/* non jQuery */
const btns = document.querySelectorAll('.btn');
btns.forEach(btn=> {
btn.addEventListener('click', () => {
console.log('JS only: '+btn.id)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<button class="btn green" id="green">1</button>
<button class="btn red" id="red">2</button><br />
<button class="btn yellow" id="yellow">3</button>
<button class="btn blue" id="blue">4</button>
</div>
Related
I am trying to click on the button class "btn ActionBar__button", but there are 2 of them and it always clicks on the button that contains the title "Don't Click".
How can I click on the button with the same class, but has a different title?
I am trying to use this code:
var elems = document.getElementsByClassName('btn ActionBar__button'); elems[0].click();
Here is the HTML:
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
You can use .querySelector
let elem = document.querySelector('[title="Click on this button"]');
console.log(elem)
elem.click();
<div class="ActionBar">
<button class="btn ActionBar__button" type="button" title="Don't Click">Don't Click</button>
<button class="btn ActionBar__button" type="button" title="Click on this button">Click on this button</button></div>
I'm trying to make a calculator with html and JavaScript. After clicking on the button i'm trying to insert the number into my div. When i do so the default '0' disappears and it does not insert anything at all.
function copy(event) {
var newValue = event.target.value;
document.querySelector("#display").innerHTML = newValue;
}
var textfield = document.querySelector("#btn_7");
textfield.addEventListener("click", copy);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>
If I add a string to newValue variable it shows in my div. So it means like when I press on the button it doesnt give anything to the div. Is there a way to solve this?
And about var textfield = document.querySelector("#btn_7");
For now I have to make this for each button and thats will take a lot of rows is there a better way to do so?
Buttons don't have a default attribute value, so in this case use the attribute textContent.
I recommend you to use a hidden input to store the values or you can also use data-attributes.
For now i have to make this for each button and that will take alot of rows is there a better way to do so?
You can use the function document.querySelectorAll(selector) and loop over it to bind the specific event.
function copy(event) {
var newValue = event.target.textContent;
document.querySelector("#display").innerHTML = newValue;
}
Array.prototype.forEach.call(document.querySelectorAll('button'), function(b) {
b.addEventListener("click", copy);
});
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>
try like this
$(function(){
$('button[id^="btn_"]').click(function(){
var display;
if($('.tmp').length > 0){
display = $('.tmp').text();
}else{
$( "<p class='tmp' style='display:none;'></p>" ).appendTo( "#frame" );
display = '';
}
switch($(this).text()){
case 'C' :
display = '0';
break;
case '=' :
display = eval(display);
break;
default :
display = display.concat($(this).text());
}
$('#display').text(display);
$('.tmp').text((display != '0') ? display : '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button id="btn_7">7</button>
<button id="btn_8">8</button>
<button id="btn_9">9</button>
<button id="btn_div">/</button><br/>
<button id="btn_4">4</button>
<button id="btn_5">5</button>
<button id="btn_6">6</button>
<button id="btn_prod">*</button><br/>
<button id="btn_1">1</button>
<button id="btn_2">2</button>
<button id="btn_3">3</button>
<button id="btn_min">-</button><br/>
<button id="btn_clear">C</button>
<button id="btn_0">0</button>
<button id="btn_eq">=</button>
<button id="btn_plus">+</button>
</div>
Here is to select value and replace html of display div. You need to do some extra stuff to achieve what is your desired output.
var display = $('#display');
$('.btn').click(function(e) {
var btn = e.target;
display.html(btn.id);
});
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<div id="frame">
<div id="display">0</div>
<button class="btn" id="btn_7">7</button>
<button class="btn" id="btn_8">8</button>
<button class="btn" id="btn_9">9</button>
<button class="btn" id="btn_div">/</button>
<button class="btn" id="btn_4">4</button>
<button class="btn" id="btn_5">5</button>
<button class="btn" id="btn_6">6</button>
<button class="btn" id="btn_prod">*</button>
<button class="btn" id="btn_1">1</button>
<button class="btn" id="btn_2">2</button>
<button class="btn" id="btn_3">3</button>
<button class="btn" id="btn_min">-</button>
<button class="btn" id="btn_clear">C</button>
<button class="btn" id="btn_0">0</button>
<button class="btn" id="btn_eq">=</button>
<button class="btn" id="btn_plus">+</button>
</div>
I have a couple of buttons
<button id="btn-ok[1]" class="btn-ok"></button>
<button id="btn-failed[1]" class="btn-failed"></button>
<button id="btn-ok[2]" class="btn-ok"></button>
<button id="btn-failed[2]" class="btn-failed"></button>
<button id="btn-ok[3]" class="btn-ok"></button>
<button id="btn-failed[3]" class="btn-failed"></button>
And I am running differnt jquery functions for btn-ok and for btn-failed.
I would like to use the index number of the id. How can I obtain it?
<script>
$(document).ready(function() {
$('#btn-ok').click(function() {
console.log('I would like to print the index of the pressed button here. (i.e. 1,2,3)');
});
});
</script>
Use html5's data attributes and separate the index and status into separate elements - I added some teext to each button so it could be easily seen and then the click grabs the data-attributes and console.logs the values.
$(document).ready(function() {
$('.btn').click(function() {
var index = $(this).data('index');
var status = $(this).data('status')
console.log(index + ' / ' + status);
}); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button data-index="1" data-status ="ok" class="btn btn-ok">1 Ok</button>
<button data-index="1" data-status ="failed" class="btn btn-failed">1 Failed</button>
<button data-index="2" data-status ="ok" class="btn btn-ok">2 OK</button>
<button data-index="2" data-status ="failed" class="btn btn-failed">2 Failed</button>
<button data-index="3" data-status ="ok" class="btn btn-ok">3 OK</button>
<button data-index="3" data-status ="failed" class="btn btn-failed">3 Failed</button>
Create a collection of all those buttons to index against. Note that index() is zero based
var $buttons = $('.btn-ok, btn-failed').click(function(){
alert($buttons.index(this));
})
Or for more specifc target:
var $buttons = $('.btn-ok, btn-failed');
$('#btn-ok\\[1\\]').click(function(){
alert($buttons.index(this));
})
Or use data attributes instead of messing around with [] in ID
<button class="btn-ok" data-index="1"></button>
..
$('.btn-ok').click(function(){
alert($(this).data('index'));
})
HTML id's shouldn't use an index. Instead use a class to hold the selector and a data attribute to hold the other values you'll need like this:
The HTML:
<button class="btn-ok" data-index="1">Ok</button>
The JS:
$('.btn-ok').click(function() {
$(this).data('index');
});
The fiddle:
https://jsfiddle.net/kLvqe8dw/2/
did you mean to get id ?
$("button").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-ok[1]" class="btn-ok">ok[1]</button>
<button id="btn-failed[1]" class="btn-failed">failed[1]</button>
<button id="btn-ok[2]" class="btn-ok">ok[2]</button>
<button id="btn-failed[2]" class="btn-failed">failed[2]</button>
<button id="btn-ok[3]" class="btn-ok">ok[3]</button>
<button id="btn-failed[3]" class="btn-failed">failed[3]</button>
I have many buttons inside of webpage like this.
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner();">more</div>
What i am trying to do is call function clickinner() on button onclick event. I tried to grab the button element by class name and change the target url.
The javascript code is as follows.
<script>
function clickinner(){
var mybtn=document.getElementsByClassName('btn');
mybtn.onClick="location.href='about-us.html'";
};
</script>
I don'twant to grab the element by Id so that i have to assign unique id each time. However whenever i click on any of buttons, the target link is not working.
Please help me.
The clicked button can be accessed by using this in the clickinner function, no need to get it by class name:
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
Furthermore, you can just directly redirect to the 'about-us' page, since you're already in the click event. So ...
<script>
function clickinner(target) { // Target refers to the clicked element
location.href='about-us.html';
};
</script>
... is enough.
If you need to go to different pages based on which class the button has, you can do something like:
function clickinner(target) {
if(target.classList.contains('mycustom_btn')) {
location.href = 'another-page.html';
} else {
location.href='about-us.html';
}
};
Add this as parameter to your function and change the location correctly
<div class="btn btn-sm btn-success mycustom_btn" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn1" onClick="javascript:clickinner(this);">more</div>
<div class="btn btn-sm btn-success mycustom_btn2" onClick="javascript:clickinner(this);">more</div>
<script>
function clickinner(mybtn){
// Do your stuff here with the clicked button
location.href='about-us.html';
};
</script>
http://jsfiddle.net/asv548g2/
Working fiddle solution
HTML:
<div id="button">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
<div class="btn btn-sm btn-success mycustom_btn">more</div>
JS:
var button = document.getElementById('button');
button.addEventListener('click', function(){
alert('only 1 button clicked');
window.location = 'about-us.html';
});
var buttons = document.querySelectorAll('.btn');
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click', function(){
alert('each button clicked');
window.location = 'about-us.html';
});
}
Try this sample
<html>
<head>
<meta charset="UTF-8">
<title>First Page</title>
<script>
function clickinner() {
window.location.href = 'secondPage.html';
}
</script>
</head>
<body>
<div class="btn btn-sm btn-success mycustom_btn"
onClick="javascript:clickinner()">more</div>
<div class="btn btn-sm btn-success mycustom_btn1"
onClick="javascript:clickinner();">more</div>
<div class="btn btn-sm btn-success mycustom_btn2"
onClick="javascript:clickinner();">more</div>
</body>
</html>
I have a jquery function attached to a btn-group like this:
<div class="row">
<!-- Vote button row -->
<div class="span8" id="votenumbers">
<div class="btn-group">
<button class="btn" id="votebutton" data-votevalue="1">1</button>
<button class="btn" id="votebutton" data-votevalue="2">2</button>
<button class="btn" id="votebutton" data-votevalue="3">3</button>
<button class="btn" id="votebutton" data-votevalue="4">4</button>
<button class="btn" id="votebutton" data-votevalue="5">5</button>
<button class="btn" id="votebutton" data-votevalue="6">6</button>
<button class="btn" id="votebutton" data-votevalue="7">7</button>
<button class="btn" id="votebutton" data-votevalue="8">8</button>
<button class="btn" id="votebutton" data-votevalue="9">9</button>
<button class="btn" id="votebutton" data-votevalue="10">10</button>
</div>
</div>
</div>
<!-- Vote button row ends -->
and this is the javascript im using to assign a function to each button.
$('#votebutton').each(function(){
$(this).click(function(){
var votevalue = $(this).data('votevalue');
var filename = $('.mainimage').data('filename');
var category = $('.mainimage').data('category');
$.ajax({
type: 'POST',
url: '?category=' + category,
data: {
"votevalue" : votevalue,
"filename" : filename
},
success: function(data){
$('body').html(data);
}
}); // end ajax
}); // end click
}); // end each
Now my problem is that only the first button is reacting to a click event. The other do not. Not sure why.
You assigned the same value for the 'id' attribute to all your buttons. Id attribute is supposed to be unique across the entire HTML page. The selector you used, $('#votebutton'), an id selector, returns a single element. This is why the click handler is only executing for one of your buttons. You should assign a different id value to each button, or no id at all.
You could get rid of the id attributes on the buttons altogether and use a class selector instead, to find the buttons:
$('#votenumbers .btn').each(function() { $(this).click(...) ... });