Janet M.

asked • 03/20/21

Beginner JavaScript / HTML Question

Hi,

I just started learning JavaScript and HTML. I'm trying to make a message appear in the span with ID "message" when a button is clicked two different ways, first using JavaScript and also using jQuery. However, neither is working for me. Here is the JavaScript:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>First Page</title>
<script>
document.getElementById("click_here").addEventListener(click, function() {
document.getElementByID("message").innerText = "Hello";
});
</script>
</head>

<body id="main">
<input name="click_here" id="click_here" type="button" value="click"/>
<p>This is the message: <span id="message"> </span></p>

</body>

</html>

And the jQuery version:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>First Page</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$("#click_here").click(function() {
$("#message").val("Hello!");
});
</script>
</head>

<body id="main">
<input name="click_here" id="click_here" type="button" value="click"/>
<p>This is the message: <span id="message"> </span></p>
</body>
</html>


Can anyone tell me what I'm doing wrong? Thanks!!

2 Answers By Expert Tutors

By:

Inactive Tutor answered • 03/22/21

Tutor
New to Wyzant

See tutors like this
See tutors like this

Hi Janet,


If you place your <scripts> tag in the <head> tag, the browser will read those before it reads the body's content. That means it cannot access both the <button> and the <span>. If you place your <scripts> inside the body section right before the closing tag </body>, it should work.


There is also a typo on this line below. It should be getElementById since Javascript is case sensitive.

document.getElementByID("message").innerText = "Hello";


Upvote • 0 Downvote
More
Report

Still looking for help? Get the right answer, fast.

Ask a question for free

Get a free answer to a quick problem.
Most questions answered within 4 hours.

OR

Find an Online Tutor Now

Choose an expert and meet online. No packages or subscriptions, pay only for the time you need.