Reputation: 21

JS appendChild is not appending anything

I'm trying to get something to append, but it's not working, and I can't seem to find what is wrong in my code.

<!DOCTYPE html>
<html>
    <head>
        <style>
            @font-face {
                  font-family: Inter;
                    src: url(fonts/Inter-Black.ttf);
            }
            body{
                background-color: darkred;
                font-family: Inter;
            }
            button, input, select {
                background-color: red;
                border-style: solid;
                border-color: black;
                border-radius: 5px;
                    font-family: Inter;
                width: 10vw;
                height: 4vw;
                transition: width 1s;
            }
            
            button:hover {
                background-color: #e60000;
                width: 13vw;
            }
            #setalarm {
                background-color: #4d0000;
                width: 85vw;
                height:25vw;
                border-radius: 10px;
            }
            
            input:hover, select:hover {
                height: 6vw;
            }
            input, select {
                              transition: height 1s;
            }
            
            .alarmset:hover {
                width: 50vw;
            }
        </style>
    </head>
    <body>
        <h1>Alarms</h1>
        <p>There are no alarms set currently.</p>
        <button onclick="seeandcompletealarm()">Set Alarm</button>
        <br>
        <br>
        <div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1>  <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
        <div id="setalarm" style="display: none;">
            <input placeholder="Name" value="" id="name">
            <input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
            <input placeholder="Hour" value="" maxlength="2" id="hr">
            <input placeholder="Minute" value="" maxlength="2" id="me">
            <select>
                <option>Once</option>
                <option>Repetitive</option>
            </select>
        
            <input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
            <select id="ampm">
                <option>AM</option>
                <option>PM</option>
            </select>
            <select>
                <option>Sunday</option>
                <option>Monday</option>
                                <option>Tuesday</option>
                <option>Wednesday</option>
                                <option>Thursday</option>
                <option>Friday</option>
                <option>Saturday</option>
            </select>
            <br>
            <br>
            
        
            <button  onclick="seeandcompletealarm(), setAlarm()">Set</button>
            
            <script>
                function seeandcompletealarm() {
                    if (document.getElementById('setalarm').style.display == "none") {
                        document.getElementById('setalarm').style.display = "block";
                        document.getElementById('des').value = "";
                        document.getElementById('nam').value = "";
                        document.getElementById('hr').value = "";
                        document.getElementById('ne').value = "";
                    } else {
                        document.getElementById('setalarm').style.display = "none";
                                           var newalarm = document.createElement("DIV");
                        newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('nam').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
                        document.body.appendChild(newalarm)
                    }
                }
            </script>

        </div>
    </body>
</html>

You might see some unnecessary code in there, like the styling and #ids, because this is pasted from my project. If you see the thing that says "Name" in big text "Des cript fdgdfgdf." in shorter text, and "0:00 AM", when you press the button that says "Set" which is visible when you press the Set Alarm button, it is suppose to append another one of those things with the values you have put in the in the input, it is suppose to look the same just with what you have typed. It use to be working before but now it's not, please show me how this can be fixed.

Upvotes: 1

Answers (1)

testing_22

Reputation: 2585

First we can read the error message and try to understand what it says:

Cannot set property 'value' of null

So once detected the proper location of the bug, we can determine that it's caused because the script can't access the property value of a null element.

In fact, this happens because neither document.getElementById('ne') nor document.getElementById('nam') can be found in the current HTML, which, by default, will become null.

So in order to fix it, place the proper id you want to change value. In this case, I can say you meant "me" instead of "ne" and "name" instead of "nam". Also, you placed "nam" in the else when creating a new alarm.

<!DOCTYPE html>
<html>
    <head>
        <style>
            @font-face {
                  font-family: Inter;
                    src: url(fonts/Inter-Black.ttf);
            }
            body{
                background-color: darkred;
                font-family: Inter;
            }
            button, input, select {
                background-color: red;
                border-style: solid;
                border-color: black;
                border-radius: 5px;
                    font-family: Inter;
                width: 10vw;
                height: 4vw;
                transition: width 1s;
            }
            
            button:hover {
                background-color: #e60000;
                width: 13vw;
            }
            #setalarm {
                background-color: #4d0000;
                width: 85vw;
                height:25vw;
                border-radius: 10px;
            }
            
            input:hover, select:hover {
                height: 6vw;
            }
            input, select {
                              transition: height 1s;
            }
            
            .alarmset:hover {
                width: 50vw;
            }
        </style>
    </head>
    <body>
        <h1>Alarms</h1>
        <p>There are no alarms set currently.</p>
        <button onclick="seeandcompletealarm()">Set Alarm</button>
        <br>
        <br>
        <div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1>  <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
        <div id="setalarm" style="display: none;">
            <input placeholder="Name" value="" id="name">
            <input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
            <input placeholder="Hour" value="" maxlength="2" id="hr">
            <input placeholder="Minute" value="" maxlength="2" id="me">
            <select>
                <option>Once</option>
                <option>Repetitive</option>
            </select>
        
            <input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
            <select id="ampm">
                <option>AM</option>
                <option>PM</option>
            </select>
            <select>
                <option>Sunday</option>
                <option>Monday</option>
                                <option>Tuesday</option>
                <option>Wednesday</option>
                                <option>Thursday</option>
                <option>Friday</option>
                <option>Saturday</option>
            </select>
            <br>
            <br>
            
        
            <button  onclick="seeandcompletealarm(), setAlarm()">Set</button>
            
            <script>
                function seeandcompletealarm() {
                    if (document.getElementById('setalarm').style.display == "none") {
                        document.getElementById('setalarm').style.display = "block";
                        document.getElementById('des').value = "";
                        document.getElementById('name').value = ""; // <-- ERROR WAS IN THIS LINE
                        document.getElementById('hr').value = "";
                        document.getElementById('me').value = ""; // <-- ERROR WAS IN THIS LINE
                    } else {
                        document.getElementById('setalarm').style.display = "none";
                                           var newalarm = document.createElement("DIV");
                        newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('name').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
                        document.body.appendChild(newalarm)
                    }
                }
            </script>

        </div>
    </body>
</html>

Upvotes: 2

JS appendChild is not appending anything

Answers (1)

Related Questions