How do I output a variable from Javascript to html?

Question

I want to inject text into a div using a variable. Here's a Stack Snippet of my code:

tDNA() {
  var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <src="main.js">
    <div id="dna"></div>
</body>

</html>


function promp

"src" is not an element. You want to be using <script src="main.js"></script> to load your main.js file. And you need to do something to actually fire the promptDNA function and you need to move the document.getElementById.... into that function as well. — Kurt
– Kurt, Commented May 15, 2018 at 22:17
Besides, you should use element.textContent instead of innerHTML. Using innerHTML for user input is an XSS vulnerabiliy. — Frax
– Frax, Commented May 15, 2018 at 22:22
Possible duplicate of how to display a javascript var in html body — Frax
– Frax, Commented May 15, 2018 at 22:24

Zohaib Ijaz · Accepted Answer · 2018-05-15 22:21:40Z

1

You need to import your script like this

<script type="text/javascript" src="main.js"></script>

answered May 15, 2018 at 22:21

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

1 Comment

connexo Over a year ago

type="text/javascript" is not required, and even not recommended.

Mihir · Accepted Answer · 2018-05-21 03:18:41Z

0

You can try this out.

HTML

<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
    <div id = "dna">
      <p></p>
    </div>
</body>
</html>

JavaScript

function promptDNA(){
    var dna = prompt("Enter the DNA: ");
    d1 = document.querySelector("p");   
    d1.textContent = dna;
}

promptDNA();

edited May 21, 2018 at 3:18

answered May 15, 2018 at 22:35

Mihir

731 silver badge10 bronze badges

2 Comments

ssc-hrep3 Over a year ago

Your script is executed before the DOM is initialized. You need to wait for the DOM to initialize or use the script tag at the end of the HTML.

Mihir Over a year ago

@ssc-hrep3 Added defer in script tag.

Jonathan Rys · Accepted Answer · 2018-05-21 13:35:38Z

0

Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function

function promptDNA(){
    var dna = prompt("Enter the DNA: ");
    document.getElementById("dna").textContent = "DNA: " + dna;
}

promptDNA()

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="dna"></div>
    <script src="main.js"></script>
</body>
</html>

Also, you're importing your script improperly.

edited May 21, 2018 at 13:35

answered May 15, 2018 at 22:20

Jonathan Rys

1,8661 gold badge15 silver badges28 bronze badges

2 Comments

AhPawLow Over a year ago

I also had to add "onload = "promptDNA()" to get it to work, thanks for the help!

ssc-hrep3 Over a year ago

Your script is executed before the DOM is initialized. You need to wait for the DOM to initialize or use the script tag at the end of the HTML.

Collectives™ on Stack Overflow

How do I output a variable from Javascript to html?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related