This question already has answers here:
Pressed <button> selector
(5 answers)
Closed 5 years ago.
So I have this button:
<button type="button" class="close" data-dismiss="modal">Close</button>
and I have this CSS attribute:
.rouletteWheelGradient{
margin-top: 52;
}
Is that possible to change the 52px to 62px when the button is pressed?
Not with raw CSS, but this is certainly possible with JavaScript. First, we need to add a click function to the HTML to trigger the JavaScript:
<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button>
Then we need to build a function that moves .rouletteWheelGradient:
function move() {
for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) {
document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px";
}
}
Note the px at the end of the function, which represents pixels. You need to specify a unit of measurement for your selector, and you're missing this in your CSS.
Here's a working example:
function move() {
for (var i = 0; i < document.getElementsByClassName("rouletteWheelGradient").length; i++) {
document.getElementsByClassName("rouletteWheelGradient")[i].style.marginTop = "62px"
}
}
<button type="button" class="close" onclick="move()" data-dismiss="modal">Close</button>
<div id="1" class="rouletteWheelGradient">One</div>
<div id="2" class="rouletteWheelGradient">Two</div>
<div id="3" class="rouletteWheelGradient">Three</div>
The above sample gives every element with class rouletteWheelGradient a top margin of 62px when the button is clicked.
I've also created a JSFiddle showcasing this here.
Hope this helps! :)
Yes, with a little JQuery:
$('button.close').click(function(e){
e.preventDefault();
$('.rouletteWheelGradient').css({'margin-top':'62px'});
});
https://jsfiddle.net/wrunnvqa/2/
Yes, you can do it with some regular JavaScript.
Just add an id and onclick attribute to your button tag like so
<button id="btn" onclick="change()" type="button" class="close" data-dismiss="modal">Close</button>
then somewhere on the page you add a function inside a script tag
<script>
function change(){
document.getElementById("btn").style.marginTop= '62px';
}
</script>
Related
When button clicked JS is showing [object HTMLButtonElement] instead of original value.
I want that whenever a button is clicked the value of button is showed.
like when button having value 3 is pressed it will show 3 and not [object HTMLButtonElement]
this is my html file
<div class="col-3">
<button onclick="val(this)" id="n1" value="1" type="button" class="btn btn-outline-primary "
style="width:100%" value="1">1</button>
</div>
<div class="col-3">
<button onclick="val(this)" id="n1" value="2" type="button" class="btn btn-outline-primary "
style="width:100%" value="2">2</button>
</div>
This is my script.js
function val(num) {
let n = num;
document.getElementById("ta").innerHTML = n;
}
when using this inside the onclick html attribute, it will be valued with the html element firing the event so the object being passed to val() will be the whole element.
If you need to know the value of the button being clicked, you should retrieve its value property
function val(num) {
let n = num.value;
document.getElementById("output").innerHTML = n;
}
button{
cursor: pointer;
}
<button
type="button" class="btn btn-outline-primary "
id="n1" value="1" onclick="val(this)">1</button>
<button
type="button" class="btn btn-outline-primary "
id="n2" value="2" onclick="val(this)">2</button>
<div id="output"></div>
Using onClick directly on Elements is not really ideal, try using addEventListener.
Another advantage of addEventListener you can create a delegated event handler, so if you have lots of buttons doing the same thing you can attach one handler to a parent element and all the buttons can be handled.
Buttons don't store values like INPUT, but if you want to associate data with buttons try using the data- attribute. eg.. data-val="1", you can then access this using the dataset property.
Below is a simple example of using addEventListener as a delegated event handler, plus using data- attributes on buttons.
Update: Buttons do have the value attribute, so you could still do
e.target.value too, but I'll leave the data- attribute as it's
pretty handy anyway.. :)
const d = document.querySelector('div');
document.body.addEventListener('click', e => {
const val = e.target.dataset.val;
if (val) d.innerText = val;
});
div {
border: 1px solid black;
margin-top: 10px;
padding: 20px;
font-size: 30pt;
font-family: arial;
}
<button data-val="1">1</button>
<button data-val="2">2</button>
<button data-val="3">3</button>
<button data-val="4">4</button>
<div>
Click button above.
</div>
I want to make a "numeric keyboard" that shows buttons with symbols from 0-9. When I press each button it is suppose to add up.
So lets say i press 3 , 4 then 1 it should say 341 on the text box or number box idk (srry im new).
I have only taken some examples from my teacher so i dont know if this is the right method.
I tried this on button 0:
<button onclick="showZero()">0</button>
<button onclick="">1</button>
<button onclick="">2</button>
<button onclick="">3</button>
<button onclick="">4</button>
<button onclick="">5</button>
<button onclick="">6</button>
<button onclick="">7</button>
<button onclick="">8</button>
<button onclick="">9</button>
<br>
<input type="text" id="txtZero">
window.onload = start;
function start() {}
function showZero()
{
var zero = document.getElementById("Number");
zero.Value="0";
document.querySelector("txtZero").appendChild(zero);
}
Am i using wrong method? I saw my teacher example, but he was using this to generate more buttons and not numbers like im trying to do.
EDIT: I edited my answer to provide a better answer that doesn't use inline event handling. I also wrapped the code into DOMContentLoaded event listener to make sure JS runs after the DOM is fully loaded.
function ready() {
// The textfield element
textField = document.getElementById("field")
// The reset button
resetButton = document.getElementById("resetbtn")
// Get all the buttons to an Array
buttons = document.getElementsByClassName("btn")
// Add click event listener to all button elements and insert their inner text as value to the text field
Array.prototype.forEach.call (buttons, (button) => {
button.addEventListener("click", () => {
textField.value += button.innerText
})
})
// Add click event listener to reset button
resetButton.addEventListener("click", () => {
textField.value = null
})
}
document.addEventListener("DOMContentLoaded", ready);
input, button {
padding: 3px 6px;
margin: 3px;
}
<button class="btn">0</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<br>
<input type="text" id="field"><button id="resetbtn">Reset</button>
Follow the code to it:
Add function setNumber to set number in field text.
Change function showZero to resetNumber if contains the value in field text insert zero.
function resetNumber()
{
document.getElementById("field").value = '0';
}
function setNumber(number) {
document.getElementById("field").value = document.getElementById("field").value === '0' ? '' : document.getElementById("field").value += number;
}
<html>
<body>
<button onclick="resetNumber()">Reset</button>
<button onclick="setNumber(0)">0</button>
<button onclick="setNumber(1)">1</button>
<button onclick="setNumber(2)">2</button>
<button onclick="setNumber(3)">3</button>
<button onclick="setNumber(4)">4</button>
<button onclick="setNumber(5)">5</button>
<button onclick="setNumber(6)">6</button>
<button onclick="setNumber(7)">7</button>
<button onclick="setNumber(8)">8</button>
<button onclick="setNumber(9)">9</button>
<br />
<input type="text" id="field" />
</body>
</html>
This question already has answers here:
AddEventListener for multiple elements doesn't work with "focus" event
(3 answers)
Closed 6 years ago.
I started working with javascript.
I have two buttons, and want change backgroundColor when click on any of these buttons.
But my code doesn't work.
This is my code:
document.getElementsByTagName("button").addEventListener("click", function(){
func(this)
});
function func(element){
element.style.backgroundColor="gray";
}
<div id="area">
<button type="button" class="btn" id="btn1">Play With Me!</button>
<button type="button" class="btn" id="btn2">Play With Me!</button>
</div>
is there any way that an addEventListener works with multiple elements?
The best way is to have as few event listeners as possible in your code. So instead of attaching an event listener to each and every button, you can attach 1 single event listener to the area div and make suitable changes based on event.target attribute.
Run the below working code snippet:
document.getElementById('area').addEventListener('click', function(event) {
func(event.target);
});
function func(element) {
element.style.backgroundColor = "blue";
}
<div id="area">
<button type="button" class="btn" id="btn1">Play With Me!</button>
<button type="button" class="btn" id="btn2">Play With Me!</button>
</div>
You could do it like this or DEMO
var button = document.getElementsByTagName("button");
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function() {
this.style.backgroundColor = "gray";
});
}
<div id="area">
<button type="button" class="btn" id="btn1">Play With Me!</button>
<button type="button" class="btn" id="btn2">Play With Me!</button>
</div>
Try this
<button type="button" onclick="myFunction()">Set background color</button>
<button type="button" onclick="myFunction()">Set background color</button>
<script>
function myFunction() {
document.body.style.backgroundColor = "red";
}
</script>
I'm trying to make it show the div when i click the button, what am i doing wrong?
<button type="button" onclick="myFunction()">Click Me!</button>
<div class="dglow">Glow</div>
<script>
function myFunction(){
dglow.style.display='block'
}
</script>
You use
document.getElementById("Dglow")
but your element has not an id but a class.
You have 2 ways to fix it:
1) Add an id to your element
<div id="Dglow" class="Dglow">
Glow
</div>
Example
2) Call find the element with the class
function myFunction() {
var y = document.getElementsByClassName('Dglow');
y[0].style.display = 'block';
}
Example
Hope it may helps you.
you just need to add id in your div.
function myFunction() {
document.getElementById("Dglow").style.display = 'block';
}
.Dglow
{
display:none;
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="Dglow" class="Dglow">
Glow
</div>
You have confused class with id.
You say :
class = "Dglow"
But in javascript you did:
getElementById("Dglow")
Instead make the html equal to:
id = "Dglow"
Is it something like this you want ?
Changed class to Id and it shows and hides.
var dglow=document.getElementById("dglow");
function myFunction(){
var style=dglow.style.display;
if(style=='block')
{
dglow.style.display='none';
}
else{
dglow.style.display='block';
}
}
<button type="button" onclick="myFunction()">Click Me!</button>
<div id="dglow" style="display:none;">Glow</div>
I am using button tag <button value="1">1</button>
Basically I want when this button is pressed, the value of the button is set into editable div.
<div contentEditable='true'; >Value from button</div>
Is that possible with client side script?
Try the below code: (EDIT Modified as user has subsequently indicated that he will use this to create a calculator)
We are doing the following:
Assign an onclick function to the button. This will be called whenever the button is clicked.
An ID is added to both the button tag and the div tag to access them using the getElementById method in JavaScript.
this.value will pass the value of the button that is currently clicked to the function.
Inside the JavaScript, we get the value of the button and set it to the innerHTML of the required div. Note: Since += is used, it would take the current contents of the div and append the button's value to it (like, if 1 is pressed followed by 2, the div would have 12 as its content).
HTML
<button value="1" id='btn1' onclick='setBtnValue(this.value);'>1</button>
<button value="2" id='btn2' onclick='setBtnValue(this.value);'>2</button>
<div contentEditable='true' id='div1'></div>
Javascript
function setBtnValue(btnVal){
document.getElementById('div1').innerHTML += btnVal;
}
Demo
you can use getElementById method.
<button value="1" onclick="function1(this)">1</button>
<div contentEditable='true' id='edit'>value from button</div>
<script type='text/javascript'>
function function1(obj){
document.getElementById("edit").innerHTML=obj.value;
}
</script>
Yes this is possible but you have to assign the id.
<button onclick="put()" id="but" value="1">1</button>
<div id="pol" >Value from button</div>
Now with function use
function put()
{
document.getElementById("pol").innerHTML = document.getElementById("but").value;
}
DEMO
HTML:
<button value="1" class="button">1</button>
<button value="2" class="button">2</button>
<div contentEditable="true" id="element"></div>
JS:
var buttons = document.getElementsByClassName('button');
var div = document.getElementById('element');
for(var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function(event) {
div.innerHTML = event.target.value;
});
}
Working example.