getElementByID keeps returning undefined

Question

Im currently getting the error shown in the title and I've tried to fix the problem with numerous solutions found on stackoverflow but none have worked as of yet, any suggestions/help would be appreciated.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> Donor Request </title>
  </head>
  <body>
    <form>
      <div>
        <label> Blood Type </label>
        <input type="text" name="" id="bloodType" value="">
        <label> Location </label>
        <input type="text" name="" id="Location" value="">
      </div>
      <button type="submit" name="button"> Request </button>
    </form>
  </body>
  <script type="text/javascript">

      const { ipcRenderer } = require('electron').remote;

      const form = document.querySelector('form')

      form.addEventListener('submit', submitForm);

      window.onload = function(){
        const bloodType = document.getElementById("bloodType").value;
      }

      function submitForm(e){
        e.preventDefault();
        console.log("working");
        console.log(bloodType, "working");
        ipcRenderer.send('Request:bloodType', bloodType);
    }

  </script>
</html>

@MadhawaPriyashantha i see i accidentally copied the older version, ive updated the question. — stackoverflown, Feb 24 '19 at 13:33

score 1 · Answer 1 · answered Feb 24 '19 at 13:38

When you use const your variable will be confined to the scope of the function it was declared within. This means that you cannot access bloodType outside your window.onload callback function.

Instead, one possible solution could be to make bloodType a global variable, and then set its value within your onload callback like so:

let bloodType;
window.onload = function(){
  bloodType = document.getElementById("bloodType").value;
}

This way, you can access bloodType through all your functions, with only having to query the DOM once.

adiga · Answer 2 · 2019-02-24T13:48:27.293

As others have mentioned, you need to define bloodType outside of the window.onload function using let or inside the submitForm function.

function submitForm(e) {
  let bloodType = document.getElementById("bloodType").value;

  e.preventDefault();
  console.log("working");

  console.log(bloodType, "working");
  ipcRenderer.send('Request:bloodType', bloodType);
}

The interesting thing here is that bloodType variable you use in your submitForm will not throw a reference error. Because bloodType refers to the actual input element with the id=bloodType.

If you have an element

<div id="example">some text</div>

example.innerHTML returns some text without having to create let example = document.getElementById("example") variable manually

So, if you were to do bloodType.value with your existing code, it will work. But, you should use document.getElementById("bloodType").value

More info: Do DOM tree elements with ids become global variables?

score 0 · Accepted Answer · edited Feb 24 '19 at 14:58

0

Declare bloodType as a var or let outside of onLoad to make it accessible inside another method, or obtain it from inside submitForm.

function submitForm(e){
    const bloodType = document.getElementById("bloodType").value;
    e.preventDefault();
    console.log("working");
    console.log(bloodType, "working");
    ipcRenderer.send('Request:bloodType', bloodType);
}

let bloodType;

window.onload = function(){
    bloodType = document.getElementById("bloodType").value;
}

function submitForm(e){
    e.preventDefault();
    console.log("working");
    console.log(bloodType, "working");
    ipcRenderer.send('Request:bloodType', bloodType);
}

edited Feb 24 '19 at 14:58

Paul Chu

1,249
3
19
27

answered Feb 24 '19 at 13:31

Steven Spungin

27,002
5
88
78

1

It does not return an ***array***. – charlietfl Feb 24 '19 at 13:32
I change answer to state `arrayLike` – Steven Spungin Feb 24 '19 at 13:35

getElementByID keeps returning undefined

3 Answers3