Facing problem with javascript code in html

Get Help General Programming
#1

hello :slightly_smiling_face: I am facing a little problem with using javascript with HTML, I have created a small form just for learning purpose, the thing I want to do is if the user checks the checkbox with id=“programmer” then an alert will appear on screen giving a greeting that “Wow, you are also a programmer like me!!” but it doesn’t seem to work. I have never encountered DOM elements with HTML & JS, it’s my first try so it would be nice if you could help me :slightly_smiling_face:
This is the HTML code with tag containing JS code -

<!DOCTYPE html>
<html>

<head>
    <title>Slam Book</title>
</head>

<body style="background-color: rgba(2, 29, 29, 0.884); font-family: 'Segoe UI', Tahoma, sans-serif; font-weight: 600;">

    <h2>Tell us something about you</h2>
    <form>
        First Name: &nbsp <input type="text" name="firstNameField" value="Enter your first name" size="20"><br>
        Last Name: &nbsp <input type="text" name="lastNameField" value="Enter your last name" size="20"> <br>
    </form>
    <p>Enter your age</p>
    <input type="number" name="ageField" value="Enter your age">
    <p>Enter your password</p>
    <input type="password" name="pass" maxlength="25">
    <p>Tell us more about you</p>
    <textarea type="comments" cols="43" rows="10">write here...</textarea>

    <p>Select your favourite color</p>
    <select name="colorChoose" size="4">
        <option selected>Red
        <option>Blue
        <option>Green
        <option>Yellow
        <option>Orange
        <option>Brown
        <option>Black
        <option>Purple
        <option>Pink
    </select>

    <p>Tell us your profession</p>
    <input type="radio" name="r1" value="student" checked>Student &nbsp
    <input type="radio" name="r1" value="teacher">Teacher &nbsp
    <input type="radio" name="r1" value="doctor">Doctor &nbsp
    <input type="radio" name="r1" value="programmer">Programmer

    <p>Tell us your hobbies</p>
    <input type="checkbox" name="c1" value="cricket" checked>Cricket &nbsp
    <input type="checkbox" name="c1" id="programmer" value="programming">Programming &nbsp
    <input type="checkbox" name="c1" value="football">Football &nbsp
    <input type="checkbox" name="c1" value="music">Music <br>

    <p>Tell something more about you in a .txt file and attach it here</p>
    <input type="file" name="file1" accept=".txt">

    <form>
        <p>
            <input type="submit" value="submit">
            <input type="reset" value="reset">
        </p>
    </form>

    <script>
        if (document.getElementById("programmer").checked) {

            alert("Wow, you are also a programmer like me!!");
        }
    </script>
</body>

</html>

Hope you can help. Thanks!! :grinning:

#2

When a web page is rendered by the browser, it reads and renders the code from top to bottom. So the JS code runs on page render. But at this point, the checkbox/radio button isn’t checked/selected

for your idea to work, you will need to add some kind of event/trigger to the checkbox which fires/executes JS code when the radio button is clicked

seems checkboxes have an onchange event, radio buttons don’t. So then I would say onclick is the way to go:

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

2 Likes
#3

Thanks this really helped!!

2 Likes