Uncaught typeError js, but not in preview

OL Connect Professional Workflow
1

I have the following error: Uncaught TypeError: Cannot set property ‘onchange’ of null

on the following code:
html

<input id="checkme" type="checkbox">
<input id="sendNewSms" class="inputButton" value=" Send " name="sendNewSms" disabled="disabled" type="submit">

js

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

when I send it to the workflow it gives the error from above and in preview it’s working fine

I stripped all the css and js so this is the only code in the template.

2

Works fine here, once you add the missing curly brace ( } ) at the end of your function.

3

My error, i forgot to copy that.

Have a look at my error in the source.

error
error960×231 17.3 KB

4

That’s what i have as well and it works. Here’s the entire HTML code as displayed via the View Source option in Chrome:

<!DOCTYPE html>
<html section="Section 1" class="OUTPUT WEB CHANNEL_WEB simplex" dpi="96" scale="1.0"><head><base href="[_voyager/localhost/9340/13244/0/](http://localhost:9090/_voyager/localhost/9340/13244/0/_voyager/localhost/9340/13244/0/)" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link type="text/css" rel="stylesheet" href="[css/context_all_styles.css?lm=1594389619937](http://localhost:9090/_voyager/localhost/9340/13244/0/css/context_all_styles.css?lm=1594389619937)">
<link type="text/css" rel="stylesheet" href="[css/context_web_styles.css?lm=1594389619937](http://localhost:9090/_voyager/localhost/9340/13244/0/css/context_web_styles.css?lm=1594389619937)">
<link type="text/css" rel="stylesheet" href="[css/default.css?lm=1594389619938](http://localhost:9090/_voyager/localhost/9340/13244/0/css/default.css?lm=1594389619938)">
<meta name="layer:0" content="virtual-stationery"></head>
<body style="" spellcheck="false">
<input id="checkme" type="checkbox">
<input id="sendNewSms" class="inputButton" value=" Send " name="sendNewSms" disabled="disabled" type="submit">
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
sendbtn.onclick = function() {
alert("Hello World");
};
</script></body></html>

5

The error message you got is because your are placing the SCRIPT element inside the HEAD element. Which mean that the SCRIPT would be executed before the INPUT has been created (or rather, before the DOM is ready). With the error message as result.

Because your script is using a DOM element it must be executed after the DOM is loaded to avoid error messages. So, in this case there are two options:

  • Run the code after the DOM is ready, for example by making use of the jQuery function $( document ).ready()
  • Or place the script before the closing tag of the BODY element (as you can see in the post of Phil).
1 Like
6

I understand that i shouldn’t put it in the HEAD but this is what the designer is doing.

As I said before, in the preview it’s working fine but when I send it to the workflow and view it then it’s not working.

Knipsel1 Knipsel2

7

This was solved with the document ready function.