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

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 ></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.

CodePudding user response：

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 ></p>
     </body>
   </html>

CodePudding user response：

If i understood correctly you need to listen for clicks on the button element. When the button is clicked you can add a "1" to the end of the <p> Element. You could get this value from the button content, or could add it as a variable or, like i did on my example, you can define it on a data-value attribute.

// Get the elements from the page
const button = document.querySelector('.button');
const textfield = document.querySelector('.textfield');

// Listen to click on the button
button.addEventListener('click', () => {
  // Get the current value inside the textfield element
  const currentText = textfield.innerHTML;

  // Add the "data-value" to the end of the current text
  const newText = currentText   button.getAttribute('data-value');

  // Replace the text on the p element with the new text
  textfield.textContent = newText;
})

<button  data-value="1">Click me</button>
<p >Your p: </p>