Mis on <output> element HTML5-s?

Element <output> kasutatakse tavaliselt arvutuste tulemuste kuvamiseks, mis tehakse tavaliselt kliendi poolel.

Kasutusnäited:

1. Seostamine vormielementidega:

   <!-- Määrame sisendiks numbri sisestamise elemendi -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Määrame teise numbri sisestamise elemendi -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Määrame outputi tulemuse kuvamiseks, seostades selle id järgi sisenditega -->
   <output name="result" for="a b"></output>
   
   <script>
     // Saame sisendite elemendid
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Saame outputi elemendi
     const result = document.querySelector('output[name="result"]');
   
     // Funktsioon tulemuse uuendamiseks
     function updateResult() {
       // Teostame arvutuse ja uuendame output väärtust
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Lisame sündmuste kuulajad, et uuendada tulemust sisendite muutmisel
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Esmase tulemusuuenduse tegemine lehe laadimisel
     updateResult();
   </script>
   

2. Tulemuste kuvamine JavaScripti abil:

   <!-- Output element tulemuse kuvamiseks -->
   <output id="message"></output>
   
   <script>
     // Saame outputi elemendi
     const messageOutput = document.getElementById('message');
   
     // Määrame väärtuse
     messageOutput.value = "Tere, maailm!";
     // Või innerText
     messageOutput.innerText = "Tere, maailm!";
   </script>
   

Atribuudid:

• for: Elementide ID-de nimekiri, mis osalevad arvutuses, mille tulemust kuvatakse <output>-s. Eraldatud tühikutega.
• name: <output>-i nimi. Kasutatakse vormi saatmisel identifitseerimiseks.

Olulised omadused:

• Vaikimisi ei oma <output> nähtavat sisu, kuni sellele ei anta väärtust value-ga või JavaScripti kaudu.
• <output> võib olla seotud vormielementidega, kuid see ise ei ole osa vormi saadetavatest andmetest, kui sellele ei anta väärtust value-ga. Selle väärtus uuendatakse tavaliselt dünaamiliselt JavaScripti abil.
• Semantiliselt on see mõeldud tulemustele kuvamiseks, mis on kasulik ligipääsetavuse ja otsingumootori optimeerimise jaoks.