Uncaught TypeError: Cannot set property 'onclick' of null- I moved the script upper now code

Question

I got an error,Uncaught TypeError: Cannot set property 'onclick' of null. I wrote

<body>
　  <form method="post" action="">
    <select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
    {% for i in json_data.items.values %}
            <option value="{{forloop.counter}}">{{ i }}</option>
    {% endfor %}
    </select>

    {% for key, values in preprocessed %}
    <select name="type" id=type{{forloop.counter}}>
    {% for counter, value in values %}
        <option value="{{forloop.counter}}">{{ value }}</option>
    {% endfor %}
    </select>
    {% endfor %}
    </form>

  <script type="text/javascript">

        $(document).ready(function () {
            $('#mainDD').on('change', function() {
              var thisType = "type" + $(this).val();
              for(i=1; i<6; i++) {
                  var thisId = "type" + i;
                  if(thisType !== thisId) {
                    $("#"+thisId).hide();
                  }
                  else {
                    $("#"+thisId).show();
                  }
              }

            }).trigger('change');

        });


  </script>

     <form id="postform" action="http://localhost:8000/app/test_view" method="POST">
      {% csrf_token %}
      <input type="submit" value="SEND">
     </form>
     <script type="text/javascript">  //this code
        let key = "prop";
        let value = "value";
          document.querySelector("input[type=button]").onclick = e => {
            const test = window.open(`test.html?${key}=${value}`, "_blank");
            console.log(test);
          }
     </script>
  </body>

I moved up codes within script tag in the place is under body tag to solve this error, but same error happens.How can I fix this?

TKoL TKoL · Accepted Answer · 2017-09-28T08:07:02

document.querySelector("input[type=button]") is returning null because there is no input of type 'button' on your html.

The only input is <input type="submit" value="SEND">. Maybe try changing your code to document.querySelector("input[type=submit]")

Uncaught TypeError: Cannot set property 'onclick' of null- I moved the script upper now code

1 Answers