How can I fix the "element is not defined" error in JavaScript when using Get

Having some issues displaying the #coupon using JavaScript, as I am encountering an error message stating that getElementById is undefined.

Code Snippet (HTML)

<html>

<head>
  <title>Exercise</title>
  <link rel="stylesheet" href="stylesheet.css">
  <script src="javascript.js"></script>
</head>

<body>

  <div class="inputi">
    <p class="input-text">Une Jam?</p> <input placeholder="Sheno emrin..." type="text" id="inputId">

    //checks input value
    <button type="button" onclick="getInputValue()">Vazhdo</button>
    // shows error message if it doesn't match the array
  <p id="message"></p>
  </div>


    // aiming to showcase this with javascript post login
    <h1 id="coupon">You have a giftcard </strong></h1>
    <button id="coupon">abas</button>

 


</body>

</html>

Javascript Section

** the issue: The problem lies in the fact that getElementById is returning as undefined. My goal is to display:block after a successful login attempt. **

      var zzz = getElementById("coupon")
      if(zzz === "none") {
      display:block; }
 

    
      
      // document.writeln("<h1>Keni fituar kupon 50% ne <strong> Green & Protein </strong> </h1>");
      
      // document.writeln('<input class="giftcode" placeholder="' +finalcode+'" type="text" id="inputId">');
      display_image(images[z], 400, 400, 'Javascript');
      document.write('<br>' + user[i]);

    }
  }

}

Answer №1

There are a couple of things to consider:

  • Instead of using getElementById, make sure to use document.getElementById

  • It's important to move your script tag to the bottom of the body tag so that the element is ready in the DOM when you try to select it

Here's an example structure to follow:

<html>
   <head>
      <title>Exercise</title>
      <link rel="stylesheet" href="stylesheet.css">
   </head>
   <body>
      <div class="inputi">
         <p class="input-text">Une Jam?</p>
         <input placeholder="Sheno emrin..." type="text" id="inputId">
         //checks input value
         <button type="button" onclick="getInputValue()">Vazhdo</button>
         // shows error message if it doesn't match the array
         <p id="message"></p>
      </div>
      // i want to display this with javascript, after the login
      <h1 id="coupon">You won giftcard </h1>
      <button id="coupon">abas</button>
      <script src="javascript.js"></script>
   </body>
</html>

Answer №2

Your code snippet indicates an attempt to call the getElementById() method, which has not been defined yet.

Additionally, only one ID can be assigned in a document for it to function correctly.

You could consider implementing something like this:

// Using JavaScript to display content after login

<span id="coupon" style="display: none">
   <h1>Congratulations! You have won a gift card</h1>
   <button>Claim Prize</button>
</span>

The correct method to use is document.getElementById("coupon");

Therefore, you should try the following:

var zzz = document.getElementById("coupon");

I am uncertain about your criteria for a successful login, but this may help. For instance, if you set var success = "yes" upon successful login:

if(success === "yes"){
zzz.style.display = "block";
}

Answer №4

Consider using: document.getElementById instead of simply writing getElementById

This is recommended because getElementById is a method specific to the document object

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

Vue.js: Attaching a function to a Template

I am struggling to find a way to bind my screen height to a calculated value in my code. Unfortunately, the current implementation is not working as expected. I would greatly appreciate any guidance on how to resolve this issue. <template> <b ...

Clicking the button in Angular should trigger a series of functions to be

It seems like I'm struggling with a simple question due to my lack of experience in this area. Any guidance or help would be greatly appreciated. I have a button that should trigger multiple functions when clicked, all defined in the same ts file. Wh ...

Deleting a segment of code in HTML with Python

My HTML text is lengthy and follows this structure: <div> <div> <p>Paragraph 1 Lorem ipsum dolor... long text... </p> <p>Paragraph 2 Lorem ipsum dolor... long text... </p> <p>Paragraph ...

Difficulty with Mongoose persisting data on api/mlab

I've developed a search API that utilizes the Imgur API to fetch JSON data of images based on user queries. Additionally, it keeps track of users' latest searches in the "/latest" URL. However, I'm encountering an issue where the array retur ...

A vertical scroll bar should be created specifically for a div within a dialog box in

I am working on a jQuery dialog that contains three divs. I want the middle div to have a vertical scroll bar when its content exceeds its height. The first div (top) should remain fixed at the top of the dialog box, and the third div (lower) should stay f ...

Live highstock chart showcasing multiple series

Currently, I have successfully implemented a real-time live graph with one series, following a tutorial similar to the example provided on this page. Below is my JavaScript code: <script> var chart; function requestData() { $.ajax({ url ...

Gradual transition in and out based on scrolling movements

I am working on a project with HTML/CSS and here is the code I have so far. What I am trying to achieve is a parallax scroll effect where as the user scrolls, the items fade in and out accordingly. For example: If the user has scrolled 200px down, .ite ...

What is the best way to display my apex chart once the ajax request has finished?

I am currently working with the Apex dynamic chart, which can be found here. I'm encountering some difficulties with the ajax call and chart rendering section. The issue arises when I interact with the Country Bar chart. Upon clicking on a country ba ...

What is the best way to remove an item from an object?

I have a checkbox that adds its id value to an array when checked, and I want to remove this value when it is unchecked. I attempted to remove the id using indexOf() + splice(), but I am unable to use indexOf() because I am dealing with an object. Does a ...

Angular's $q is a powerful tool for handling asynchronous operations, while

I've been struggling for hours trying to figure out how $q works. I'm attempting to use it with a function from the google.maps API, but I just can't seem to grasp it on my own. Maybe I completely misunderstand $q. Can someone help me or pro ...

What is causing React to make multiple API calls when loading the page?

I have a page set up with hooks to retrieve data from a third-party API. Once the data is fetched, I perform various calculations on it before passing it as props to the component. However, it appears that the API is being called multiple times for each ca ...

Display chosen preferences in an Angularjs dropdown alongside additional options

I'm currently developing a blogging software and have implemented an AngularJS dropdown for selecting post terms. Here's the code: <select multiple="multiple" name="terms" ng-model="post.data.attributes.term_ids" required> ...

Establish the focus when the TinyMCE editor loads

After clicking the edit button, the tinymce text editor is displayed but there's an issue where the focus is not set on the first load of the editor. However, it works fine from the second load onwards. Here's what I have attempted: HTML <h ...

general declarations take precedence over media queries

One of my usual CSS rules looks something like this: #dayslist > div { height: 51px; } Then there's the media query CSS rule: @media (max-width: 979px){ #dayslist > div { height: 44px; } } However, whenever I resize my bro ...

I am looking to achieve a hover effect with CSS that blurs an element upon hovering

I need help fixing the blur effect on my button. When I hover over it, the button becomes blurred even though I don't want that. I tried adjusting the z-index values but it didn't work. There seems to be an error in the snippet where I want only ...

Executing an automated process of adding items to the shopping cart using Python without the need to have a

Does anyone know of a way to automate the add-to-cart process using Python without the need for an open browser window? I've experimented with modules like mechanize, but they lack the ability to directly interact with web elements. Currently, I&apo ...

AngularJS Regex for detecting numbers

I need to implement regular expressions in AngularJs that will accept the following three statements: 09344542525 -> 11 digit number starting with 09 02144532363 -> 11 digit number starting with 021 44532363 -> 8 digit number Below is my HTML ...

Collecting data from an HTML form filled out by users

I need a way to capture user input from an HTML form and display it later on my website. I want to show all the information users provide along with their pizza selections. I've been struggling for hours trying to make this work without success :( Spe ...

Issue encountered: Incompatibility between Mongoose Populate and Array.push()

After reading a different post addressing the same issue, I still couldn't figure out how to implement the solution into my own scenario. The discussion revolved around the topic of node js Array.push() not working using mongoose. In my Mongoose asyn ...

Obtain data from jQuery Data row

I am currently working on an asp.net page where I have implemented jQuery datatables. Below is a snippet of the code: <% foreach (SubmissionSearchResult result in SearchResults) {%> <tr data-name='<%=result.ID %>'> For each r ...