Problem z wyświetleniem wartości w JS

pytanie zadane 17 listopada 2022 w JavaScript przez koko200307 Nowicjusz (160 p.)

Witam, próbuję stworzyć ciąg fibonnaciego,a otrzymuje błąd:

liczby.html:60 Uncaught TypeError: Cannot read properties of null (reading 'value')
at oblicz (liczby.html:60:40)
at HTMLButtonElement.onclick (liczby.html:45:28)

Przesyłam kod strony:

<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ciągi liczbowe</title>
<link rel="stylesheet" href="styl2.css">


</head>

<body>
<header>
<section id="baner1">
<h2>Poznaj ciągi liczbowe</h2>
</section>

<section id="baner2">
<a href="liczby.html"><h5>Ciągi arytmetyczne</h5></a>
</section>

<section id="baner3">
<a href="fib.html"><h5>Ciąg Fibonacciego</h5></a>
</section>

<section id="baner4">
<img src="obraz1.png" alt="Fibonacci">
</section>

</header>

<main>
<section id="lewy">
<ol>
  <li>ciągi arytmetyczne</li>
  <li>ciągi geometryczne</li>
  <li>ciągi Fibonacciego</li>
</ol>
</section>

<section id="prawy">
<h2>Generowanie ciągu arytmetycznego</h2>
Pierwszy wyraz A1:<input type="number" name="a1"><br>
Różnica ciągu R:<input type="number" name="r"><br>
Liczba wyrazów w ciągu N:<input type="number" name="n"><br>
<button onClick="oblicz()">Generuj Ciąg</button>
<br>
<span id="wynik"></span>
</section>

</main>

<footer>
<p>Autor: 00000000000</p>
</footer>


<script>
function oblicz()
{
   var a1=document.querySelector("#a1").value;
   a1=parseInt(a1);
   var r=document.querySelector("#r").value;
    r=parseInt(r);
   var n=document.getElementById("#n").value;
    n=parseInt(n);

 var wynik = "Ciąg arytmetyczny zawiera wyrazy: ";
             wynik += a1;

 for(let i=1;i<n;i++)
 {
 a1=a1+r;
 wynik+= ", " +a1;
 }


   document.getElementById("wynik").innerHTML= wynik;
  
}
</script>

</body>
</html>

1 odpowiedź

odpowiedź 17 listopada 2022 przez ScriptyChris Mędrzec (190,190 p.)

Nie masz w DOM elementów o identyfikatorach: a1, r ani n, więc querySelector zwraca null. Masz inputy o takim atrybucie name, więc powinieneś użyć selektora atrybutu zamiast # (od identyfikatora). Możesz też (i raczej powinieneś) owinąć te kontrolki w <form> i wtedy będziesz mógł je wygodniej odczytać poprzez formularzowe property elements.

komentarz 17 listopada 2022 przez koko200307 Nowicjusz (160 p.)

Form nie pomogło bo tylko mignęło tekstem, więc usunąłem, ale zmieniłem z name na id i teraz działa.Dziekuje za pomoc.

komentarz 17 listopada 2022 przez VBService Ekspert (253,340 p.)
edycja 17 listopada 2022 przez VBService

Form nie pomogło bo tylko mignęło tekstem

bo przycisk <button> zadziałał jak submit

dopisz event do

onClick="oblicz(event)"

a w funkcji oblicz dopisz

function oblicz(e)
{
    e.preventDefault();
    // reszta kodu

}

      <section id="prawy">
        <form>
          <h2>Generowanie ciągu arytmetycznego</h2>
          <label for="a1">Pierwszy wyraz A1:</label>
          <input type="number" id="a1"><br>
          <label for="r">Różnica ciągu R:</label>
          <input type="number" id="r"><br>
          <label for="n">Liczba wyrazów w ciągu N:</label>
          <input type="number" id="n"><br>
          <button onClick="oblicz(event)">Generuj Ciąg</button>
          <br>
          <span id="wynik"></span>
        </form>
      </section>

      function oblicz(e)
      {
        e.preventDefault();
        let   a1=parseInt(document.querySelector("#a1").value);
        const  r=parseInt(document.querySelector("#r").value),
               n=parseInt(document.querySelector("#n").value);

        if (a1 && r && n)
        {
          let wynik = "Ciąg arytmetyczny zawiera wyrazy: " + a1;
          for (let i=1; i<n; i++)
            wynik += ", " + (a1+=r);

          document.getElementById("wynik").innerHTML= wynik;
        }
      }

komentarz 18 listopada 2022 przez koko200307 Nowicjusz (160 p.)

Ok, działa. mam tez pytanie w sprawie grafiki, chodzi o zrobienie gifa dwoch obrazow ktore zmieniaja sie naprzemian w programie paint 3d. jak tego dokonać?