Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – JS newbie: NodeList returns null but has elements

I had working Javascript/HTML/Jinja code when it was all in one file and now I want to split it into separate files.

My JS code was working before the split, but when I moved it to a new file, the commented out portion stopped working. I’m self-taught, so this might be something obvious but I haven’t come across the right info yet. I can’t access the element and I’m not sure why. How can I fix it? And: Is there some place that discusses why it worked in the same file but separating the code would break it like that? Thanks for any insight!

Before the move, my JS code was at the bottom of my HTML and I’ve seen that that sometimes makes a difference. I tried the <script src> at the bottom, but no difference.

My relevant HTML (rendered Jinja) code block:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta name="keywords" content="download,bookshelf">
  <meta name="description" content="UI with options to download Goodreads Bookshelf"/>
  <link rel="stylesheet" href="/static/style.css" >
  <link rel="stylesheet" href="/static/download_page.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">;</script>
  <script src="/static/download_page.js"></script>
  <title> Download Page  | Group Bookshelf Tools</title>
</head>  
<body class="color-scheme-dark">
    <form action="/download_shelf/" method="post" name="choice_form">
      <input id="csrf_token" name="csrf_token" type="hidden" value="...">
      <form-title>
        <label class="form-title" for="form_name">Download Form Options</label>
      </form-title>
      <form-row>
        <label class="item-label" for="shelf_choice">Shelf Choice</label>
        <select class="drop-down-menu" id="shelf_choice" name="shelf_choice" onchange="setShelfChoice()" required><option value="Generic Test Shelf">Generic Test Shelf</option><option value="Shelf One">Shelf One</option><option value="Shelf Two">Shelf Two</option></select>
      </form-row>
      <form-submit>
        <input class="btn form-submit" id="submit" name="submit" type="submit" value="Submit">  
      </form-submit>
    </form> 
  </div>
</body>
</html>

Tried it without this but no change.

My JS code:

document.addEventListener('DOMContentLoaded', setShelfChoice());

function setShelfChoice() { 
  let el = document.getElementsByName('shelf_choice');
  console.log("el type: ", typeof(el), el);
  console.log("el value: ", el[0].value);
  // let index = el.selectedIndex;
  // choiceValue = el.options[index].textContent;
  // console.log("setShelfChoice: ", choiceValue, "nn");
  // console.log("index: ", index);
}

When I reload the HTML page, it calls the function, and there is a Node 0 in the array and it has all the right values. But I’m not sure what I should be calling if not [0].

I tried changing console.log("el: ", el[0].value); to console.log("el: ", el[0]); the output just says undefined.

I tried adding an initialization but that hasn’t affected anything:

function setShelfChoice() { 
  let el = document.getElementsByName('shelf_choice');
  if (el.selectedIndex == undefined) {
    el.selectedIndex = 0;
  }
  console.log("el: ", typeof(el), el);
  console.log("el: ", el.value);

console output

Tags:

2

Answers


  1. 0

    I think, here you are trying to get from Nodelist not from Node.

    let index = el.selectedIndex;
console.log("el: ", el.value);

    Maybe it should look like:

    let index = el[0].selectedIndex;
console.log("el: ", el[0].value);

    Do you start execute your js code after

    window.onload 
document.onload

    or

    <body onload="myFunction()">
    Login or Signup to reply.
  2. 0

    The problem lies here:

    document.addEventListener('DOMContentLoaded', setShelfChoice());
                                              ^^^^^^^^^^^^^^^^

    When you put parentheses after a function name, you execute the function. In this case, you’re not setting the shelf choice when the DOM content loads, you’re executing it immediately when that line is first read.

    You’re passing the function’s result, rather than the function itself.

    Try without parentheses instead:

    document.addEventListener('DOMContentLoaded', setShelfChoice);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search