Ինչ է <output> տարրը HTML5-ում։

Էլեմենտ <output>-ը օգտագործվում է հաշվարկների արդյունքները ցուցադրելու համար, որոնք սովորաբար կատարվում են հաճախորդի կողմում:

Օգտագործման օրինակներ:

1. Ֆորմայի տարրերի հետ կապակցում:

   <!-- Նշում ենք թիվ մուտքագրելու համար input -->
   <input type="number" id="a" name="a" value="10">
   +
   <!-- Նշում ենք այլ թիվ մուտքագրելու համար input -->
   <input type="number" id="b" name="b" value="20">
   =
   <!-- Նշում ենք output՝ արդյունքը ցուցադրելու համար, կապելով այն id-ով նշված input-ների հետ -->
   <output name="result" for="a b"></output>
   
   <script>
     // Ստանում ենք input տարրերը
     const a = document.getElementById('a');
     const b = document.getElementById('b');
     // Ստանում ենք output տարր
     const result = document.querySelector('output[name="result"]');
   
     // Ֆունկցիա արդյունքը թարմացնելու համար
     function updateResult() {
       // Հաշվարկ կատարում և output-ի արժեքը թարմացում
       result.value = parseInt(a.value) + parseInt(b.value);
     }
   
     // Ավելացնում ենք իրադարձության լսողներ՝ արդյունքը թարմացնելու համար input-ների փոփոխության ժամանակ
     a.addEventListener('input', updateResult);
     b.addEventListener('input', updateResult);
   
     // Առաջին անգամ արդյունքը թարմացնել էջի բեռնումով
     updateResult();
   </script>
   

2. JavaScript-ի միջոցով արդյունքների ցուցադրում:

   <!-- output տարր՝ արդյունքը ցուցադրելու համար -->
   <output id="message"></output>
   
   <script>
     // Ստանում ենք output տարր
     const messageOutput = document.getElementById('message');
   
     // Ավելացնում ենք արժեք
     messageOutput.value = "Բարև, աշխարհ!";
     // կամ innerText
     messageOutput.innerText = "Բարև, աշխարհ!";
   </script>
   

Ատրիբուտներ:

• for: Անդամների ցանկ, որոնք մասնակցում են հաշվարկին, և որոնց արդյունքը ցուցադրվում է <output>-ում։ Բաժանվում են բացատներով:
• name: <output>-ի անունը։ Օգտագործվում է ձևի ուղարկման ժամանակ նույնականացման համար:

Հիմնական առանձնահատկություններ:

• Դեպի սկզբում <output>-ը չունի տեսանելի պարունակություն, մինչև որ նրան չի նշանակվում արժեք value-ով կամ JavaScript-ով:
• <output>-ը կարող է կապված լինել ձևի տարրերի հետ, բայց ինքնին չի հանդիսանում ձևի ուղարկվող տվյալների մաս, եթե միայն նրան չի նշանակվում արժեք value-ով։ Նրա արժեքը սովորաբար թարմացվում է դինամիկորեն JavaScript-ով:
• Սեմանտիկորեն նախատեսված է արդյունքների ցուցադրման համար, ինչը օգտակար է հասանելիության և որոնողական օպտիմալացման համար։