I need to make a button C, when clicked, which clears 4 paragraphs with id = out, out1, out2, out3

<p id="out"></p> <p id="out1"></p> <p id="out2"></p> <p id="out3"></p>

Thank you in advance!

    1 answer 1

     function clearCalc() { var items = document.querySelectorAll("#out,#out1,#out2,#out3"); for (var i = 0; i < items.length; i++) items[i].textContent = ""; } 
     p { border: 1px solid black; background-color:lightgreen; min-height:20px; padding:2px; margin-top:5px; margin-bottom:0px; } 
     <button onclick="clearCalc()">Clear</button> <p id="out">P - out</p> <p id="out1">P - out1</p> <p id="out2">P - out2</p> <p id="out3">P - out3</p>

    In the following fragment all together:

     <script> function clearCalc() { var items = document.querySelectorAll("#out,#out1,#out2,#out3"); for (var i = 0; i < items.length; i++) items[i].textContent = ""; } </script> <style> p { border: 1px solid black; background-color: lightgreen; min-height: 20px; padding: 2px; margin-top: 5px; margin-bottom: 0px; } </style> <button onclick="clearCalc()">Clear</button> <p id="out">P - out</p> <p id="out1">P - out1</p> <p id="out2">P - out2</p> <p id="out3">P - out3</p>

    • It does not work for me (( - Andrey Semenchenko
    • kalc.html: 35 Uncaught ReferenceError: clearCalc is not defined at HTMLButtonElement.onclick - Andrey Semenchenko
    • @Andrey Semenchenko You inaccurately copied the code from the answer to yourself ( - Igor
    • I copied everything well! And where to insert this piece of code in the middle: p {border: 1px solid black; background-color: lightgreen; min-height: 20px; padding: 2px; margin-top: 5px; margin-bottom: 0px; } And why is he even needed ??? - Andrey Semenchenko
    • @AndreySemenchenko It is necessary for beauty and does not matter. - Igor