Kas yra <output> elementas HTML5?

Elemento <output> naudojamas rezultatams rodyti, kurie paprastai atliekami kliento pusėje.

Naudojimo pavyzdžiai:

1. Susiejimas su formos elementais:

   <!-- Nurodome įvesties elementą skaičiaus įvedimui -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Nurodome įvesties elementą kito skaičiaus įvedimui -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Nurodome output elementą rezultatui rodyti, susiejant jį su įvesties elementais pagal id -->
   <output name="result" for="a b"></output>
   
   <script>
     // Gauname įvesties elementus
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Gauname output elementą
     const result = document.querySelector('output[name="result"]');
   
     // Funkcija rezultatui atnaujinti
     function updateResult() {
       // Atlikti skaičiavimą ir atnaujinti output reikšmę
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Pridedame įvykių klausiklius, kad atnaujintų rezultatą keičiant įvesties reikšmes
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Pirmą kartą atnaujinti rezultatą įkeliant puslapį
     updateResult();
   </script>
   

2. Rezultatų rodymas naudojant JavaScript:

   <!-- Output elementas rezultatui rodyti -->
   <output id="message"></output>
   
   <script>
     // Gauname output elementą
     const messageOutput = document.getElementById('message');
   
     // Nustatome reikšmę
     messageOutput.value = "Labas, pasauli!";
     // Arba innerText
     messageOutput.innerText = "Labas, pasauli!";
   </script>
   

Savybės:

• Pagal numatytuosius nustatymus <output> neturi matomo turinio, kol jam nėra priskirta reikšmė per value atributą arba JavaScript.
• <output> gali būti susietas su formos elementais, tačiau jis pats nėra siųstų duomenų dalis, jei jam nėra priskirta reikšmė per value. Jo reikšmė dažniausiai atnaujinama dinamiškai naudojant JavaScript.
• Semantiškai jis skirtas rezultatų išvedimui, kas naudinga prieinamumui ir paieškos optimizacijai.