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()");
}
Related
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>
I'm creating a page which has multiple order buttons (One for each menu item). When an order is placed I want to call a Javascript function to change only the order button pressed rather than every button with the ID. There has to be better implementation for these function calls... Anyone?
function orderFood1(helpVal) {
if (document.getElementById("food1").innerHTML === "Order") {
document.getElementById("food1").innerHTML = "✅";
// Alert waiter
} else {
document.getElementById("food1").innerHTML = "Order";
// Cancel Request
}
}
function orderFood2(helpVal) {
if (document.getElementById("food2").innerHTML === "Order") {
document.getElementById("food2").innerHTML = "✅";
// Alert waiter
} else {
document.getElementById("food2").innerHTML = "Order";
// Cancel Request
}
}
function orderFood3(helpVal) {
if (document.getElementById("food3").innerHTML === "Order") {
document.getElementById("food3").innerHTML = "✅";
// Alert waiter
} else {
document.getElementById("food3").innerHTML = "Order";
// Cancel Request
}
}
<button type="button" id="food1" onclick="orderFood1()" class="btn btn-primary">Order</button>
<button type="button" id="food2" onclick="orderFood2()" class="btn btn-primary">Order</button>
<button type="button" id="food3" onclick="orderFood3()" class="btn btn-primary">Order</button>
They all look to do nearly the same thing, so you can use only a single function. To identify which button was clicked, you can examine the clicked button from the listener - the target of the event. Also, best to avoid inline handlers - attach the listeners properly using Javascript instead.
Since you're only inserting text, it'd be more appropriate to retrieve and assign to the textContent of the element, rather than its innerHTML.
const handleOrder = ({ target }) => {
if (target.textContent === 'Order') {
target.textContent = '✅';
console.log('Alerting waiter');
} else {
target.textContent = "Order";
console.log('Canceling request');
}
};
for (const button of document.querySelectorAll('button')) {
button.addEventListener('click', handleOrder);
}
<button type="button" class="btn btn-primary">Order</button>
<button type="button" class="btn btn-primary">Order</button>
<button type="button" class="btn btn-primary">Order</button>
I think you can create the following html code:
<button type="button" id="food1" onclick="orderFood('food1')" class="btn btn-primary">Order</button>
<button type="button" id="food2" onclick="orderFood('food2')" class="btn btn-primary">Order</button>
Which means that you use only single orderFood function, that gets the ID of the button element as a parameter.
And then your JS code could be something like this:
function orderFood(foodId) {
if (document.getElementById(foodId).innerHTML === "Order") {
document.getElementById(foodId).innerHTML = "✅";
// Alert waiter
} else {
document.getElementById(foodId).innerHTML = "Order";
// Cancel Request
}
}
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>
I want to save this button so that when i close the browser and reopen it i still is white.
I tried a lot but i just don't get the solution.
<script>
function save(){
var storeButton = document.getElementById("testButton1");
localStorage.setItem("button", storeButton)
}
function load(){
var storedButton = localStorage.getItem("button");
if(storedButton){
document.getElementById("testButton1") = storedButton;
}
}
</script>
<body onload="load()">
<input class="blue" type="button" id="testButton1" value="click me to turn white" style="background-color:blue" onclick="changeBlue(this)">
<input type="button" id="testButton" value="Save" onclick="save()"/>
</body>
You cannot save the button itself since local storage only stores strings.
Instead, save the information that you need in the form of a string (in this case, the color):
function save() {
var storeButton = document.getElementById("testButton1");
localStorage.setItem("buttonColor", storeButton.style.backgroundColor);
}
function load() {
var color = localStorage.getItem("buttonColor");
if (color) {
document.getElementById("testButton1").style.backgroundColor = color;
}
}
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