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