How to switch class between eliment? - javascript

I wanna switch class name active between button. That's mean,at a time only one button can be green by clicking. How is it possible by vanila js?
.active{
background-color:green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button>Button1</button>
<button class="active">Button2</button>
<button>Button3</button>
</body>
</html>

Try this:
First, I added a unique id to each button, so they could be identified in code.
<button id="button1">Button1</button>
<button id="button2" class="active">Button2</button>
<button id="button3">Button3</button>
Then I added a listener to the window’s load event, which gets a the list of buttons whose id starts with “button” and adds a listener to each one’s click event. The click handler is a function named select.
window.addEventListener('load', () => {
const buttons = document.querySelectorAll('button[id^=button]')
buttons.forEach(button => {
button.addEventListener('click', select)
})
})
The select function uses querySelector to find the currently active button (i.e. the one with the active class), and remove the class from it. Then it adds the active class to the button that was clicked instead.
function select(evt) {
document.querySelector('.active').classList.remove('active')
evt.target.classList.add('active')
}

Related

Can I give Classnames in Tailwindcss so i can use them in javascript?

My Problem:
I want to give an button a classname instead of an id, but i dont know how this would work because im using tailwind
const btn = document.querySelector(".my-class");
btn.addEventListener('submit', (e) => {
console.log("test");
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/output.css">
</head>
<body>
<button class="rounded-full my-class bg-purple-500 py-2 px-5">
test
</button>
</body>
<script src="js/test.js"></script>
</html>
the error:
The Question:
Is there a way to assign class names while using tailwindcss?
What I've tried:
I tried to just write my own class name in the tailwind class, but that doesn't work.
what i understand from this question is, you need event using class if button is clicked.
In addEventListener use click.
const btn = document.querySelector(".my-class");
btn.addEventListener('click', (e) => {
alert("test");
});
<body>
<button class="rounded-full my-class bg-purple-500 py-2 px-5">
test
</button>
</body>
Create custom class my-class and add it inside the class list
<button class="rounded-full my-class bg-purple-500 py-2 px-5">
test
</button>
Change submit to click in your listener
const btn = document.querySelector(".my-class");
btn.addEventListener('click', (e) => {
console.log("test");
});

onclick event handler of a child button node is also triggered on the parent button node

I have a button that generates a new form template with its own input and button nodes. The newly generated button element has its own onclick event handler, but when I click the first button that is supposed to generate the new form template, the onclick secondary button handler is triggered.
1- Why does the child button handler trigger when I click the parent button?
2- How would you create and manage the onclick event handler for the generated template button?
Thanks in advance!
const addButton = document.querySelector("#add-button")
addButton.onclick = () =>{
const newForm = document.createElement("div")
newForm.innerHTML = `\
<form>
<input type="text" name="name" placeholder=" name" required>
<button type="submit" id="new-add-button" oninput="${inputHandler()}">submit</button>
</form>
`
document.body.appendChild(newForm)
}
function inputHandler(){
alert("hello")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #333;">
<button type="button" id="add-button">Add</button>
<script src="./main.js"></script>
</body>
</html>

How can I disable a button when you hover over it?

I need to know how can I disable a button when I hover over it, and then enable it when I'm not.
I've tried javascript, to disable it when the mouse coordinates were just so, but it didn't work.
Here's my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
This is for a joke, but I want it done quickly.
Thanks,
Enlighten Me
PS: I'm new to StackOverflow, so please give any pointers to posts and such.
use this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button type="button" id="hbtn">Press Me</button>
</body>
<script>
document.getElementById('hbtn').addEventListener('mouseenter',(event)=>{
event.target.disabled=true;
});
</script>
</html>
Hope this helps
#joke-btn:hover{
display:none
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>This is a button</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button id="joke-btn"type="button">Press Me</button>
<script src="script.js"></script>
</body>
</html>
With JavaScript, you could add event listeners for the onmouseenter and onmouseleave DOM events and change the disabled property value of the button HTML element.
For example, in your case, a simple code solution (not the only possible one), would be something like:
const button = document.querySelector("button");
button.addEventListener("mouseenter", () => {
button.disabled = true;
});
button.addEventListener("mouseleave", () => {
button.disabled = false;
});
Setup enter/leave event listeners on your button...
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event
I think the simplest option here is to just do it with css. However this doesn't actually disable the button, just the mouse click event, so you can still click the button when it is selected by using the return key:
Assign a class to your button (you can call it anything you want):
<button class="myButton" type="button">Press Me</button>
And in your CSS file disable mouse clicks:
.myButton:hover {
pointer-events: none;
}

JavaSctipt: Change color of a text element on button click

I am completely new to HTML and JavaScript, and I wanted to do something simple. I want a button, and below it was some text. When I clicked the button, I want the color of the text to change(Let's assume black to red for now). This is my attempt at this problem.
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
</head>
<body>
<button id="BUTTON" onclick="changeColor">Click me</button>
<p id="TEXT">Text</p>
</body>
<script src="first.js"></script>
</html>
first.js:
var button = document.getElementById("BUTTON");
var color = document.getElementById("TEXT").style.color;
function changeColor(color) {
color = "#0EE5D0";
};
button.onclick = changeColor();
Thanks!
Here is a snippet that does what you asked for.
I removed the color variable and replaced it with text, the element that you want to change the color of.
I modified the changeColor function to return the chosen color.
Correctly used the onclick listener.
let button = document.getElementById("BUTTON");
let text = document.getElementById("TEXT")
function changeColor() {
return "#0EE5D0";
};
button.addEventListener("click", () => {
text.style.color = changeColor()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
</head>
<body>
<button id="BUTTON" onclick="changeColor">Click me</button>
<p id="TEXT">Text</p>
</body>
<script src="first.js"></script>
</html>
There are two main issues with your code. Both have been identified in the comments above.
First, button.onclick = changeColor(); doesn't assign the function to the onclick event. It calls the function and assigns the return value of the function to onclick, and that's not your intention.
Second, color = "#0EE5D0"; is not associated with the DOM element, so changing its value has no impact on the DOM element.
var button = document.getElementById("BUTTON");
button.onclick =function changeColor() {
document.getElementById("TEXT").style.color = "#0EE5D0";
};

How to get computer to click on a button

The buttons will display a message when they are clicked. When the user click any button, the computer will automatically trigger a click Event Listener on another button by clicking it. After the computer click on a button, a message will be displayed. How do I get the computer to automatically click on button to display the message after user clicked any button? Thank you for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Computer click</title>
</head>
<body>
<p id="content"></p>
<p id="content2"></p>
<button id="b1">Click me</button>
<button id="b2">Click me</button>
<script>
let p = document.querySelector("#content");
let p2 = document.querySelector("#content2");
let button1= document.querySelector("#b1");
let button2= document.querySelector("#b2");
//if this button is clicked, the computer will automatically trigger a click event on button 2
button1.addEventListener("click", function () {
p.textContent = "Hello";
});
//if this button is clicked, the computer will automatically trigger a click event on button 1
button2.addEventListener("click", function () {
p2.textContent = "You are great !!!";
});
</script>
</body>
</html>
You need remove if conditions, with if (button1.clicked==true) condition, click event handler did not subscribed.
let p = document.querySelector("#content");
let p2 = document.querySelector("#content2");
let button1= document.querySelector("#b1");
let button2= document.querySelector("#b2");
//if this button is clicked, the computer will automatically trigger a click event on button 2
button1.addEventListener("click", function () {
p.textContent = "Hello";
});
//if this button is clicked, the computer will automatically trigger a click event on button 1
button2.addEventListener("click", function () {
p2.textContent = "You are great !!!";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Computer click</title>
</head>
<body>
<p id="content"></p>
<p id="content2"></p>
<button id="b1">Click me</button>
<button id="b2">Click me</button>
</body>
</html>

Categories