Creating an eventlistener (addEventListener)

Curriculum Help JavaScript
#1

Hi everyone,

Please assist with the following, I’m trying to create an eventlistener for two events and this is what I have created, this is for a form.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css">
    <title>ALO CheckList</title>
</head>
<body>
    <h1>
        Security Signoff CheckList
    </h1>
    <div>
        <h2>
        Customer Documents 
        </h2>

        <form>
            <p>
                <div>
                    <label>
                    ID
                    </label>
                    <input type="checkbox" id="IDcheckbox">
                </div>
                <div>
                    <label>
                    Comments:
                    </label>
                    <textarea id="AutoComments" rows="10" cols="60"></textarea>
                </div>
                <div>
                    <button> 
                    Done Checking
                    </button>
                    </div>
            </p>    
              
        </form>
    </div>
   

<script src="test.js"></script>
    
</body>
</html>

javascript code

//what I need to happen

/*
If the check box is not selected per section, comments must be added 
comments to be added (document not provided, document older than 3 months)

*/

var checkbox = document.querySelector("IDcheckbox");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        // Checkbox is checked.
    } else {
        // Checkbox is not checked add comments/auto comments "document not provided" to Comments on  
        
    }
});
#2

I’m not really sure what you’re trying to do, but your selector for the checkbox should be this (you forgot the #):

var checkbox = document.querySelector("#IDcheckbox");

1 Like
#3

Thanks for the feedback, noticed that error. So what I’m trying to do is to get auto comments generated if the checkbox is not ticked (meaning that when the user is confirming the Identity document and its not there, the user does not have to type it out)
So it should state “ID document not available”.

Just to state further I’m still teaching myself javascript

#4

Still not sure I get it but that’s not important. You can manipulate the text in your textarea like this:

var checkbox = document.querySelector("#IDcheckbox");
var textarea = document.querySelector("#AutoComments");

checkbox.addEventListener( 'change', function() {
    if(this.checked) {
        textarea.value = 'The checkbox is checked'
    } else {
        textarea.value = 'The checkbox is not checked'
    }
});
1 Like
#5

@jsdisco Thank you for your assistance, you gave me the correct wording “manipulate” the text area.