Prosty javaScript, nie wiem czemu nie działa...

pytanie zadane 20 kwietnia 2020 w JavaScript przez michulo Obywatel (1,240 p.)
edycja 20 kwietnia 2020 przez michulo

Nie mogę zwalczyć błędu, mam zadanie aby wartość "cena_stan" przeliczała się po aktualizacji wyboru "stan_sam" na formularzu. Dostaje stale "cannot set property 'onchange' of null" w trakcie ładowania strony

próbowałem:
zmienić sposób ładowania,
wstawiałem skrypt do htmla,
ustawiłem go na końcu .

Co robię źle?

Skrypt:

function nalicz_3() {
    var stan = 0 //stara składnia 

    switch (document.getElementById('stan_sam').value) { 
        case "0": stan = 0.8; break; 
        case "1": stan = 0.9; break; 
        case "2": stan = 1.0; break; 
        case "3": stan = 1.1; break; 
        case "4": stan = 1.2; break; 
    }
    document.getElementById('cena_stan').value = document.getElementById('cena_pln').value * stan
}
window.onload=()=>{
document.getElementById("stan_sam").onchange = function() {nalicz_3()};
document.getElementById("cena_pln").onchange = function() {nalicz_3()};
}

formularz

<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html lang="pl">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styl.css">
    <title>Oldtimer Club1</title>

</head>

<body>
    <div id=kontener>
        <div>
        <header>
                <h1>Oldtimer Club</h1>
                <img src="car.png" alt="Samochod"  />
        </header>
    </div>
        <nav id="nawigacja"> 
                <table>
                    <tr>
                        <td class="vtop">
                            <ul>
                                <li><a href="index.html">Główna</a></li>
                                <li> <a href="details.html">Giełda</a></li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="vdown">
                            <ul>
                                <li> <a href="gallery.html">Kontakt</a></li>
                            </ul>
                        </td>
                    </tr>
                </table>


            
        </nav>
        <section id="srodek">
            <table align="center">
                <form action="about.blank" method="post">
                    <tr>
                        <th colspan="2">
                            Formularz dodania ogloszenia
                        </th>

                    </tr>
                    <tr>
                        <td align="right">
                            Marka
                        </td>
                        <td>
                            <input type="text" name="marka" required />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Model
                        </td>
                        <td>
                            <input type="text" name="model" required />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Rok
                        </td>
                        <td>
                            <input type="text" name="rok" required />
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Silnik
                        </td>
                        <td>
                            <input type="radio" name="silnik" value="benzyna" checked /> Benzyna
                            <input type="radio" name="silnik" value="disel" /> Disel
                        </td>
                    </tr>
                    <tr>
                        <td align="right">Wyposazenie </td>
                        <td>
                            <input type="checkbox" name="wyp[]" value="1" /> Klimatyzacja <br />
                            <input type="checkbox" name="wyp[]" value="2" /> ABS <br />
                            <input type="checkbox" name="wyp[]" value="4" /> Wspomaganie Kierownicy
                        </td>
                    </tr>
                    <tr>
                        <td align="right">
                            Stan Ogólny
                        </td>
                        <td>
                            <select name="stan_sam" onchange="nalicz_2()" >
                                <option value="4">Idealny</option>
                                <option value="3">Bardzo Dobry</option>
                                <option value="2">Dobry</option>
                                <option value="1">Średni</option>
                                <option value="0" selected>Zły</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>cena</td>
                        <td><input type="text" name="cena_pln" value=1000 required></td>

                    </tr>
                    <tr>
                        <td>Cena Stan</td>
                        <td><input type="text" name="cena_stan" > </td>
                    </tr>
                    <tr>
                        <td>
                            Opis
                        </td>
                        <td>
                            <textarea name="opis" cols="50" rows="6"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td align="center" colspan="2">
                            <input type="submit" name="wyslij" value="Potwierdź" />
                            <input type="reset" name="reset" value="Reset" />
                        </td>
                    </tr>
                </form>
            </table>
        </section>
         <footer id="stopka"></footer> 



    </div>

    <script src="nalicz.js">
    </script>
</body>

</html>

2 odpowiedzi

odpowiedź 20 kwietnia 2020 przez mb-dir Mądrala (6,710 p.)

odpowiedź 21 kwietnia 2020 przez lapacz.kornel Mądrala (6,930 p.)

let condition, price, converted;

const calculate = () => {
    if(isNaN(condition.value) || isNaN(price.value)) return;

    converted.value = price.value * condition.value;
}

window.addEventListener('DOMContentLoaded', () => {
  condition = document.getElementById('cena_sam');
  price = document.getElementById('cena_pln');
  converted = document.getElementById('cena_stan');


  [condition, price].forEach(element => {
    element.addEventListener("change", calculate);
  });
});

<select id="cena_sam">
  <option value="1.2">Idealny</option>
  <option value="1.1">Bardzo Dobry</option>
  <option value="1.0" selected>Dobry</option>
  <option value="0.9">Średni</option>
  <option value="0.8">Zły</option>
</select>

<input type="text" id="cena_pln" value=1000 required>
<input type="text" id="cena_stan" >

Troszkę zmieniłem kod. Oznaczyłeś elementy przez name, a próbowałeś się do nich dostać po id. W js używa się camelCase. Inputy #cena_pln i #cena stan powinny mieć [type=number]. W html używa się kebab-case. Element #cena_stan nie powinien być w ogóle inputem, bo ktoś go może edytować. Może coś przeoczyłem