html in a javascript variable gives null error

You cannot have newlines in JavaScript string literals

If your code is actually

var htmlmessage = <p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>
<p>
 <form>
  <strong>Aantal in te plannen medewerkers: </strong><br>
    <input type="number" name="medewerkers" id='aantmdw' value="1"></input>
</p>
<p>
  <strong>Aantal in te plannen machines: </strong><br>
    <input type="number" name="machines" id='aantmch' value="1"></input>
 </form>
</p>

then you need to change it to

var htmlmessage="<p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>"+
'<p>'+
' <form>'+
'  <strong>Aantal in te plannen medewerkers: </strong><br>'+
'    <input type="number" name="medewerkers" id="aantmdw" value="1"></input>'+
'</p>'+
'<p>'+
'  <strong>Aantal in te plannen machines: </strong><br>'+
'    <input type="number" name="machines" id="aantmch" value="1"></input>'+
' </form>'+
'</p>';

Watch the quotes

OR you can use ES6 template literals

var htmlmessage = `<p><strong>Vul de volgende gegevens in om het inplannen af te ronden:</strong></p>
<p>
 <form>
  <strong>Aantal in te plannen medewerkers: </strong><br>
    <input type="number" name="medewerkers" id='aantmdw' value="1"></input>
</p>
<p>
  <strong>Aantal in te plannen machines: </strong><br>
    <input type="number" name="machines" id='aantmch' value="1"></input>
 </form>
</p>`

AFTER you update the DOM with the HTML, you can use

var mdwCount = document.getElementById("aantmdw").value;
var mchCount = document.getElementById("aantmch").value;

Leave a Comment