J'essaie d'ajouter quelque chose là où cela fonctionnait auparavant, mais maintenant, cela ne fonctionne pas.

<!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>

Vous pouvez voir du code inutile, comme le style et les #ids, car il est collé à partir de mon projet. Si vous voyez la chose qui dit "Nom" en gros texte "Des cript fdgdfgdf." dans un texte plus court, et "0:00 AM", lorsque vous appuyez sur le bouton qui dit "Définir" qui est visible lorsque vous appuyez sur le bouton Régler l'alarme , il est supposé ajouter un autre de ces éléments avec les valeurs que vous avez mises dans l'entrée, il est supposé avoir la même apparence avec ce que vous avez tapé. Cela fonctionnait avant, mais maintenant ce n'est pas le cas, veuillez me montrer comment cela peut être corrigé.

1
Wild and Rare 13 mars 2021 à 03:49

1 réponse

Meilleure réponse

Nous pouvons d'abord lire le message d'erreur et essayer de comprendre ce qu'il dit:

Cannot set property 'value' of null

Donc, une fois détecté l'emplacement correct du bogue, nous pouvons déterminer qu'il est causé parce que le script ne peut pas accéder à la valeur de propriété d'un élément nul.

En fait, cela se produit parce que ni document.getElementById('ne') ni document.getElementById('nam') ne peuvent être trouvés dans le HTML actuel, qui, par défaut, deviendra null.

Donc, pour résoudre ce problème, placez l'identifiant approprié pour lequel vous souhaitez modifier la valeur. Dans ce cas, je peux dire que vous vouliez dire "moi" au lieu de "ne" et "nom" au lieu de "nam". De plus, vous avez placé "nam" dans le else lors de la création d'une nouvelle alarme.

<!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>
1
testing_22 13 mars 2021 à 03:22