Wyświetlanie treści getElementById("").innerHTML

0

Witam, dopiero zaczynam moją przygodę z programowaniem - mam następujący problem: chciałbym, żeby przeglądarka wyświetliła wpisaną wartość - a wyświetla "undefined", gdzie popełniłem błąd?

<head>
    <meta charset="UTF-8" />
    <title>Tytuł</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">

      
      var wpis = document.getElementById("pole1").value;
   
    
      function wyswietl()
      {
        
        document.getElementById("dol").innerHTML = wpis;
      }

      

      
      
      

    </script>
  </head>
  <body>
    <div class="gora">
      <input type="text" id="pole1" />
      <input type="submit" value="Wpisz cos" onclick="wyswietl()" />
      

    </div>
    
    <div id="dol">
      
    </div>


  </body>
3

Próbujesz pobrać znacznik input zanim zdąży się załadować, więc dlatego w tym miejscu pojawia się undefined.

var wpis = document.getElementById("pole1").value;

Żeby to naprawić musisz skasować swój skrypt z head i dodać go przed końcem body

    <script>
      // Tutaj zawartość skryptu
    </script>
  </body>
</html>

albo skorzystać z eventów np DOMContentLoaded + click

https://javascript.info/introduction-browser-events

<html>
<head>
 <meta charset="UTF-8" />
  <title>Tytuł</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
      const input = document.getElementById("pole1");
      const content = document.getElementById("dol");
      const submitButton = document.getElementById("submit-button");
      
      function setContentText() {
        // TUTAJ BARDZO WAŻNA UWAGA, ŻEBY DO WSTAWIANIA TEKSTU NIE UŻYWAĆ innerHTML,
        // BO ŹLE UŻYTE MOŻE POWODOWAĆ BŁĘDY Z BEZPIECZEŃSTEM (XSS) 
        content.textContent = input.value; 
      }
  
      submitButton.addEventListener('click', setContentText);
    });
  </script>
</head>
<body>
  <div class="gora">
    <input type="text" id="pole1" />
    <input id="submit-button" type="submit" value="Wpisz cos" />
  </div>
  
  <div id="dol">
    
  </div>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1