Ways to troubleshoot the issue of a non-working "Onclick function"

let username;
document.getElementById("mySubmit").onclick= function(){
  username= document.getElementById("myText").value;
document.getElementById("myH1").textContent= `Hello ${username}`

}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="4style.css">
</head>
<body>
  <script src="4userinput.js"></script>

  <h1 id="myH1">Welcome</h1>
<label>user name:</label>
<input id="myText"> 
<br>
<br>
<button id="mySubmit">Submit</button>
</body>
</html>

Upon executing the code, an error was triggered: 4userinput.js:10 Uncaught TypeError: Cannot set properties of null (setting 'onclick')

I am seeking assistance to resolve this issue. Interestingly, my code worked flawlessly in the StackOverflow snippet environment.

Answer №1

The issue arises from the JavaScript code being executed before the DOM elements have fully loaded. This is because the script is included before the button even exists. To fix this problem, simply move the <script> tag to the end of the <body> section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="4style.css">
</head>
<body>
  

  <h1 id="myH1">Welcome</h1>
<label>user name:</label>
<input id="myText"> 
<br>
<br>
<button id="mySubmit">Submit</button>


<!-- Move it here -->
<script src="4userinput.js"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can jQuery distinguish between implicit and explicit CSS height values?

When working with jQuery, I have noticed that both $('#foo').height() and $('#foo').css('height') will return a value regardless of whether a height property is explicitly set using CSS. Is there a way to determine if an eleme ...

Start by creating a set of vertices and triangles to be utilized by the vertex shader

After experimenting with vertexshaderart.com, I'm eager to apply what I've learned on a different website. While I have experience using shaders in the past, some effects achieved on the site require access to vertices, lines, and triangles. Pass ...

Ways to initiate a page redirection within the componentWillReceiveProps lifecycle method

When my webpage or component generates a form and sends it to the backend API upon submission, I receive an object in return if the process is successful. This object is then added to my redux store. In order to determine whether the reducer successfully ...

displaying the JSON output from a PHP script within an HTML table

Here's the scenario: I have an HTML file that involves the following steps: Accepts a card number input from the user using an HTML form, Sends this input to a PHP file and receives a JSON-formatted response through xmlhttp.responseText, Needs to di ...

Changing the color of a highlighted face on a PlaneGeometry in ThreeJS

I am trying to figure out how to change the color of a specific face when hovering over it in my PlaneGeometry, but I am having trouble getting the selected face. Below is the code I have so far: //THREE.WebGLRenderer 69 // Creating a plane var geometr ...

Enhance the functionality of Jquery UI drag and drop to be responsive even when in a zoom

I came across this drag and drop demo for Jquery UI that was working perfectly at a regular zoom level. However, when I zoomed out to 50%, things started acting strange. Can anyone provide suggestions on how to fix the demo? Link to Demo Any help would be ...

Utilizing display: flex for creating table padding

Hey there! I'm currently working on a webpage layout that includes a logo and a table. To achieve this, I've used display flex for the wrapper element. However, I've noticed that when viewing the page on mobile devices, the padding of the ta ...

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

Will PhoneGap applications reset after being updated?

I'm currently working on an iOS PhoneGap app with plans for future updates. One concern I have is that sometimes these updates are not backwards-compatible, and I worry that the app may still be using an outdated cache or session despite the update. ...

Vaadin DropDown list showcasing options with unique identifiers

My current issue revolves around a ComboBox feature that allows users to select contacts from their contact list. Although the ComboBox displays contact names, it lacks the ability to directly map to the true contact as it requires the contact ID. I am str ...

Tips on aligning carousel images and captions next to each other

Would anyone be able to assist me in creating a carousel similar to this? I haven't been able to locate any examples or tutorials that match the design of my desired carousel. Here is the design I am referring to ...

What is the best way to ensure my buttons hide or display correctly when clicked?

I have been working on setting up an edit button that toggles the visibility of save and cancel buttons. However, I encountered a problem where all the buttons disappear when I click on the edit button. This issue did not occur with my other buttons, and t ...

What is the best way to retrieve the values of various input fields using their numbered IDs and then store them in a MySQL

I attempted to design a form that allows for multiple inserts, where users can add as many titles and languages as they desire by entering a number. The display of titles and languages is functioning correctly, but I am struggling to retrieve the individua ...

Adding space around images inside a DIV

Hey there! I recently did some work on my website, and now I'm facing a couple of issues. Check out the changes here! After tweaking a few things, the spacing around the images on the index page has gone wonky. I want the padding to be evenly distri ...

Resolver for nested TypeORM Apollo queries

I've set up a schema that includes database tables and entity classes as shown below: type User { id: Int! phoneNumber: String! } type Event { id: Int! host: User } Now, I'm attempting to create a query using Apollo like this ...

Is there a problem connecting to the MongoDB server?

I am having trouble connecting to the MongoDB server using the link provided below. I have double-checked the password and dbName, but it still won't connect. Can someone please assist me with this? const mongoose = require('mongoose'); ...

Finding the arithmetic operator and then assigning both the operator and its index to a globally accessible variable can be accomplished through a

Hello, I am currently learning web development and as a beginner project, I am working on creating a calculator in React. My goal is to have the selected arithmetic operation ("+", "/", "-", or "X") executed when the user clicks "=". To achieve this, I s ...

Trouble with Jsonp when using the getJSON function in jQuery

$(document).ready(function() { $.getJSON("http://quanta.net16.net/wordpressnew/test.php?jsoncallback=?", function(data) { alert('swag'); }); }); This is the JSON request I'm making and my data is properly contained within ?({object} ...

What could be causing the image URL to not function properly in the CSS file?

I have been struggling with this issue all day and have searched numerous sources for answers. The login.css file can be found at: WebContent/resources/css/login.css The image file is located here: WebContent/resources/img/pencil.jpg Despite my attem ...

Adjust the positioning of a class element

I have an eye icon that changes position when clicked. Initially, it is set to left: 10%;, but if there is a DOM element with the ID login-section, it should be repositioned to left: 50%;. I attempted to use document.getElementsByClassName('fa-eye-sl ...