JS won't appear in browser with HTML

I am a brand new novice web developer and feel silly cuz I have spent so long trying to figure out why the JS won't show up in my browser with the HTML which shows up as expected.

I wrote a quick getDate() JS file that displays perfectly but has no HTML with it. Then I wrote a quick rotate string js file that I placed within the <script> tags but only the HTML showed up (a text box).

I tried a different super simple add numbers file (see below) that again only appears as the html heading 'Add Numbers'. I have tried using different browsers and different IDEs and tried putting the js as an external file and directly in the HTML in <script> tags right before the final </body>.

I finally copy and pasted a file from MDN tutorials that I know isn't buggy and again no JS just HTML. I am going to be a really bad web developer if I can't figure out how to run my JS and HTML together seamlessly.

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



<script>

function myAddFunc() {

    var a = 2;

    var b = 4;

var result = a + b;

    document.getElementById("result").innerHTML = result;

}

</script>

</body>

</html>

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

4

did you "call" the function? Add myAddFunc() as the last line in your script tag (below })

– Randy Casburn
Nov 21 '18 at 18:25

2

Or just remove the function wrapper.

– Ryan Wilson
Nov 21 '18 at 18:26

add a comment |

I am a brand new novice web developer and feel silly cuz I have spent so long trying to figure out why the JS won't show up in my browser with the HTML which shows up as expected.

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



<script>

function myAddFunc() {

    var a = 2;

    var b = 4;

var result = a + b;

    document.getElementById("result").innerHTML = result;

}

</script>

</body>

</html>

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

4

did you "call" the function? Add myAddFunc() as the last line in your script tag (below })

– Randy Casburn
Nov 21 '18 at 18:25

2

Or just remove the function wrapper.

– Ryan Wilson
Nov 21 '18 at 18:26

add a comment |

I am a brand new novice web developer and feel silly cuz I have spent so long trying to figure out why the JS won't show up in my browser with the HTML which shows up as expected.

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



<script>

function myAddFunc() {

    var a = 2;

    var b = 4;

var result = a + b;

    document.getElementById("result").innerHTML = result;

}

</script>

</body>

</html>

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

I am a brand new novice web developer and feel silly cuz I have spent so long trying to figure out why the JS won't show up in my browser with the HTML which shows up as expected.

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



<script>

function myAddFunc() {

    var a = 2;

    var b = 4;

var result = a + b;

    document.getElementById("result").innerHTML = result;

}

</script>

</body>

</html>

javascript html

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

edited Nov 21 '18 at 19:00

sirandy

1,56341723

edited Nov 21 '18 at 19:00

sirandy

1,56341723

edited Nov 21 '18 at 19:00

sirandy

1,56341723

asked Nov 21 '18 at 18:23

Andrea Abshire

asked Nov 21 '18 at 18:23

Andrea Abshire

asked Nov 21 '18 at 18:23

Andrea Abshire

4

did you "call" the function? Add myAddFunc() as the last line in your script tag (below })

– Randy Casburn
Nov 21 '18 at 18:25

2

Or just remove the function wrapper.

– Ryan Wilson
Nov 21 '18 at 18:26

add a comment |

4

did you "call" the function? Add myAddFunc() as the last line in your script tag (below })

– Randy Casburn
Nov 21 '18 at 18:25

2

Or just remove the function wrapper.

– Ryan Wilson
Nov 21 '18 at 18:26

did you "call" the function? Add myAddFunc() as the last line in your script tag (below })

– Randy Casburn
Nov 21 '18 at 18:25

Or just remove the function wrapper.

– Ryan Wilson
Nov 21 '18 at 18:26

add a comment |

1 Answer
1

active

oldest

votes

Function needs to be invoked (func()) in order for it to run. Alternatively you could remove the function wrapper all together and just have:

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

In your script tag.

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

answered Nov 21 '18 at 18:31

pmkro

1,425717

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418364%2fjs-wont-appear-in-browser-with-html%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Function needs to be invoked (func()) in order for it to run. Alternatively you could remove the function wrapper all together and just have:

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

In your script tag.

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

answered Nov 21 '18 at 18:31

pmkro

1,425717

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

add a comment |

Function needs to be invoked (func()) in order for it to run. Alternatively you could remove the function wrapper all together and just have:

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

In your script tag.

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

answered Nov 21 '18 at 18:31

pmkro

1,425717

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

add a comment |

Function needs to be invoked (func()) in order for it to run. Alternatively you could remove the function wrapper all together and just have:

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

In your script tag.

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

answered Nov 21 '18 at 18:31

pmkro

1,425717

Function needs to be invoked (func()) in order for it to run. Alternatively you could remove the function wrapper all together and just have:

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

In your script tag.

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

function myAddFunc() {

  var a = 2;

  var b = 4;

  var result = a + b;

  document.getElementById("result").innerHTML = result;

}

myAddFunc();

<!DOCTYPE html>



<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8" />

<title>Add Numbers</title>

</head>

<body>



<h3>Add Numbers</h3>



<p>Two plus four equals:</p>



<p id="result"></p>



</body>

</html>

answered Nov 21 '18 at 18:31

pmkro

1,425717

answered Nov 21 '18 at 18:31

pmkro

1,425717

answered Nov 21 '18 at 18:31

pmkro

1,425717

answered Nov 21 '18 at 18:31

pmkro

1,425717

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

add a comment |

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

Thank you so much! That was the issue my not calling the function. It's things like this that ensure I will never forget that again. I feel a little silly for spending so long on such a simple problem but I learn each time so it's worth it. Thank you again.

– Andrea Abshire
Nov 21 '18 at 19:04

No problem! If you could mark the answer as accepted for future viewers that would be great!

– pmkro
Nov 21 '18 at 19:05

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu