Print Javascript text in the same format text is in html code

Question

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

Just as a suggestion, you might want an automatic input that greets as you type - stackoverflow.com/questions/65606607/… — Endothermic_Dragon
– Endothermic_Dragon, Commented Jan 7, 2021 at 4:38

UModeL · Accepted Answer · 2021-01-07 04:33:26Z

3

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>

answered Jan 7, 2021 at 4:33

UModeL

1,2271 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md Somir · Accepted Answer · 2021-01-07 04:34:46Z

2

you can try appending like this...for reference enter link description here

document.querySelector("#result1").innerHTML ="<h2>Good day "+name"+"</h2>";

answered Jan 7, 2021 at 4:34

Md Somir

5705 silver badges10 bronze badges

Comments

Saurabh More · Accepted Answer · 2021-01-07 04:36:33Z

1

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

answered Jan 7, 2021 at 4:36

Saurabh More

4238 silver badges32 bronze badges

Comments

Endothermic_Dragon · Accepted Answer · 2021-01-07 04:35:05Z

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>

Jakob Lämmle · Accepted Answer · 2021-01-07 04:35:16Z

0

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.

answered Jan 7, 2021 at 4:35

Jakob Lämmle

3261 silver badge6 bronze badges

Collectives™ on Stack Overflow

Print Javascript text in the same format text is in html code

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related