Just specify the desired (correct) selector:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
<h2> Good day Buyer!</h2>
</div>
<form onsubmit="greet(); return false">
<input type="text" id="name">
<input type="submit">
</form>
</body>
<script>
function greet() {
var name = document.querySelector("#name").value;
if (name !== "") {
document.querySelector("#result1 h2").innerHTML = "Good day, " + name + "!";
} // ploblem here ^^
}
</script>
you can try appending like this…for reference
enter link description here
document.querySelector("#result1").innerHTML ="<h2>Good day "+name"+"</h2>";
Write the same format that you want to print, in your innerHTML. Then it will work.
document.querySelector("#result1").innerHTML ="**<h2>Good day, " + name+"!</h2>**";
The problem is that you are selecting the div, not the h2 element. I did so by getting the div’s first child. Alternatively, you can insert it manually through the innerHTML, or you can move the ID selector to the h2 element.
Note: I made it automatically greet on input.
function greet() {
var name = document.querySelector("#name").value;
if (name !== "") {
document.querySelector("#result1").children[0].innerHTML = "Good day, " + name + "!";
} else {
document.querySelector("#result1").children[0].innerHTML = "Good day, Buyer!";
}
}
document.getElementsByTagName("INPUT")[0].addEventListener("input", greet)
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
**<h2> Good day Buyer!</h2>**
</div>
<input type="text" id="name">
</body>
</html>
Move the id from the div in the h2 tag, but there are a lot of differnet ways.
<div>
**<h2 id="result1"> Good day Buyer!</h2>**
</div>
If you try to change the “Inner” of the div all inside this tag will be replaced.
Im trying to do one of my first websites in html, javascript and css and im having lots of questions! I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Mercedes Benz Dealership</title>
</head>
<body>
<div id="result1">
**<h2> Good day Buyer!</h2>**
</div>
<form onsubmit="greet(); return false">
<input type ="text" id="name">
<input type="submit">
</form>
</body>
<script>
function greet()
{
var name = document.querySelector("#name").value;
if (name!=="")
{
document.querySelector("#result1").innerHTML ="Good day, " + name;
}
}
</script>
</html>
I want the format of the text in:
document.querySelector("#result1").innerHTML ="Good day, " + name;
To be the same of :
<h2> Good day Buyer!</h2>
The title is the same one! but when the user inputs the name the only difference should be “Good day,Alan” for example with the same bold, letter size and everything of the h2 title!
How can i achieve that?? I have been trying to do it with no success.
Thanks a lot for the help!! really
You should have the id for h2 tag instead of div tag.
Just as a suggestion, you might want an automatic input that greets as you type –
