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

Anyone 0
Viewed 33

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.

document.write javascript css innerhtml html
2 Answers

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>

userYBSN0

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 class="button" data-value="1">Click me</button>
<p class="textfield">Your p: </p>

Boguz0
Related