Write a button's number in a <p> tag with javascript

September 5, 2022

I have a button that is filled by 1. I want that when I click button, a p tag fill by 1.
That’s I want to edit a html tag with javascript.

<!DOCTYPE html>
  <html>
     <head>
       <style>
          body{
             background: linear-gradient(to bottom, rgb(75,83,119), rgb(33,35,53));
          }
          #btn1{
             background: linear-gradient(to bottom, rgb(49,87,255), rgb(78,39,255));
             box-shadow: 5px 5px 10px black;
             border: 0px;
             border-radius: 5px;
             font-size:  medium;
             width: 110px;
             height: 40px;
             text-align: center;
             margin(200px,200px,200px,200px);
             transition-duration: 0.1s;
          }
          #btn1:active{
             box-shadow: 0px 0px 0px black;
             transform: translateY(3px);
             transition-duration: 0.1s;
          }
          .textfield{
             width: 500px;
             height: 200px;
             background: bisque;
             margin-left: 150px;
             margin-top: 100px;
          }
       </style>
       <script>
          b1(){
             //Do some code here
          }
       </script>
     </head>
     <body>
       <button id="btn1" onclick="b1();">1</button>
       <p class="textfield"></p>
     </body>
   </html>

please tell me how can write the 1 in the p tag with javascript.
Of course I also wanna be able to write 11 or 1111.

>Solution :

You can get the text content of the element by getting the element itself, in case inside the click function of button, you can pass this ( which refers to the element that fires the event which is the button ), and get it’s textContent, and then get p element by class using const p = document.querySelector('.textfield'), and add the value of the button inside by p.textContent += buttonValue

<!DOCTYPE html>
  <html>
     <head>
       <style>
          body{
             background: linear-gradient(to bottom, rgb(75,83,119), rgb(33,35,53));
          }
          #btn1{
             background: linear-gradient(to bottom, rgb(49,87,255), rgb(78,39,255));
             box-shadow: 5px 5px 10px black;
             border: 0px;
             border-radius: 5px;
             font-size:  medium;
             width: 110px;
             height: 40px;
             text-align: center;
             margin(200px,200px,200px,200px);
             transition-duration: 0.1s;
          }
          #btn1:active{
             box-shadow: 0px 0px 0px black;
             transform: translateY(3px);
             transition-duration: 0.1s;
          }
          .textfield{
             width: 500px;
             height: 200px;
             background: bisque;
             margin-left: 150px;
             margin-top: 100px;
          }
       </style>
       <script>
          function b1(button){
             const buttonValue = button.textContent;
             const p = document.querySelector('.textfield');
             p.textContent += buttonValue
          }
       </script>
     </head>
     <body>
       <button id="btn1" onclick="b1(this);">1</button>
       <p class="textfield"></p>
     </body>
   </html>