How to get computer to click on a button - javascript

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>

Related

How to switch class between eliment?

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')
}

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>

Access data-id of clicked anchor tag and also redirect to href path using JavaScript

I want to apply click event on anchor tags but when I click on first then get the data-id value of first and also redirect to href value similarly if I click on second link then get the data-id of second link only and redirect to its href value.
<!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>
One
Two
Three
<script>
const body = document.querySelector('body');
body.onclick = (e) => {
e.preventDefault();
let link = body.querySelector('.link');
console.log(link);
}
</script>
</body>
</html>
This is the code I'm trying but when I click on any of the anchor tag then only first anchor tag accessing.
This is what I did and now it's working perfect.
<!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>
One
Two
Three
<script>
const body = document.querySelector('body');
body.onclick = (e) => {
e.preventDefault();
let anc = e.target;
const data = {
a: anc.getAttribute('data-id')
}
localStorage.setItem('data', JSON.stringify(data));
window.location = anc.getAttribute('href');
}
</script>
</body>
</html>

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";
};

Cancel out a prompt if something equals something

I got this prompt that makes it change the document.title when the prompt has been submitted, but i want it to make it so that if my prompt equals something, it cancels out the prompt, how to do that?
here is my HTML and JS, also it changes the h1 text, in the snippet it wont change the stackoverflow title cause it's already pre defined.
P.S: i know it's gonna be something small i missed, but pardon me for that i'm still a beginner >_<
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
} else if(document.title === mainTitle) {
websiteTitle = null;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I'm not sure if I understood what you are trying to do, but I'll leave here a snippet with the solution to the problem I think you have:
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
}
if(websiteTitle === mainTitle) {
window.location.reload();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I can't close a prompt yourself, the user has to do it, you may want to use an input and manually hide it / show it to simulate a prompt.

Categories