<button onclick="myFunction()">Set demo1</button>
<button onclick="myFunction()">Set demo2</button>
<button onclick="myFunction()">Set demo3</button>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
This is the markup I have. I am trying to use just one function to update the <p> tags individually.
Example Scenario: Clicking Set demo1 button will only update the <p> which has id="demo1" but with only one function.
Help would be very much appreciated.
You can use following approach. Clicking on each button will affect corresponding p element.
var elems = document.getElementsByClassName('btn');
Array.from(elems).forEach(v => v.addEventListener('click', function(){
var index = this.innerHTML.match(/\d+/)[0];
var elem = document.getElementById('demo'+index);
// logic
elem.style.color = 'red'; // just an example
}));
<button class='btn'>Set demo1</button>
<button class='btn'>Set demo2</button>
<button class='btn'>Set demo3</button>
<p id="demo1">1</p>
<p id="demo2">2</p>
<p id="demo3">3</p>
If you change your markup slightly so that each button has a data-target attribute, then it can be easily done.
HTML:
<button onclick="myFunction()" data-target="#demo1">Set demo1</button>
<button onclick="myFunction()" data-target="#demo2">Set demo2</button>
<button onclick="myFunction()" data-target="#demo3">Set demo3</button>
JS
function myFunction() {
var pTag = document.getElementById(this.getAttribute('data-target'));
pTag.textContent = "Hello world"; // whatever you would like
}
Related
I am trying to make text change to different text when a button is pressed and I'm not sure why it's not working.
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerHTML = "B";
}
</script>
Use innerText insteadof innerHTML like this:
<p id="test"> A </p>
<button onclick = "test()"> Click </button>
<script>
function test(){
document.getElementById("test").innerText = "B";
}
</script>
const button = document.querySelector('.test__button');
button.addEventListener("click", test)
function test() {
document.getElementById("test").innerHTML = "B";
}
<p id="test"> A </p>
<button class="test__button"> Click </button>
This question already has answers here:
Increment a number inside a div?
(4 answers)
Closed 3 years ago.
I am creating buttons on click I would like to increment button text on every time a user creates a new button
HTML
<button id="btn">Add button</button>
<div id="movie-block">
</div>
$("#btn").on("click", function(){
var newMovieBlockButton = $("<div class='movie-button w'>Button1<div>");
$("#movieblock" + movieid).append(newMovieBlockButton);
})
I want when user click add button new button should be created starting with eg
button1, if he creates another button it should be button2 etc etc
How can I accomplish that using jquery?
In each click, you can take the length of the button with class movie-button and concatenate that with the text:
$("#btn").on("click", function(){
var len = $('.movie-button').length + 1;
var newMovieBlockButton = $("<div class='movie-button w'>Button"+ len +"<div>");
$("#movie-block").append(newMovieBlockButton);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="btn">Add button</button>
<div id="movie-block">
</div>
A quick google search would have helped.
<button id="btn">Add button</button>
<div id="movie-block">
</div>
let counter = 1;
$("#btn").on("click", function(){
var newMovieBlockButton = $(`<div class='movie-button w'>Button${counter}<div>`);
$("#movieblock" + movieid).append(newMovieBlockButton);
counter++;
})
<!DOCTYPE html>
<html>
<body>
<button onclick="append()">Try it</button>
<div id="myDIV">
New Paragraphs will add on this div
</div>
<script>
function append() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
Hope this will help
I'm still very new to javascript, so sorry is this is a basic question. I've tried doing this several different ways, and have researched but can't quite find what I'm trying to do.
What I want to do is calculate the value of the product of two user created fields (hPlayed and hDealt) when the user clicks a button. The values for hp and hd have been previously generated by the user using a button. In my script they have variable names of hPlayed and bDealt, but in the below code I'm creating new variables called hPlayedInput and hDealtInput to represent them (which I realize may not be necessary, but I've tried using just those variables with a console.log as well).
Modified JS:
function handsPlayedRate() {
var hPlayedInput = document.getElementById("hp").value;
var hDealtInput = document.getElementById("hd").value;
var hRate = parseFloat(hPlayedInput) / parseFloat(hDealtInput);
document.getElementById("hr").innerHTML = hRate;
}
FULL (MODIFIED) HTML:
<button class="btnlost" onclick="handsPlayedMinus()">-</button>
<button class="btnwon" onclick="handsPlayedPlus()">+</button>
<p class="count" id="hp">0</p>
<button class="btnlost" onclick="handsDealtMinus()">-</button>
<button class="btnwon" onclick="handsDealtPlus()">+</button>
<p class="count" id="hd">0</p>
<button class="btnreset" type="button" onclick="handsPlayedRate()">Calculate Percent</button>
<p class="count" id="hr">0</p>
Since the values you needed are not in an input field, you need to use .innerHTML to get the value.
function handsPlayedRate() {
var hPlayedInput = document.getElementById("hp").innerHTML;
var hDealtInput = document.getElementById("hd").innerHTML;
var hRate = parseFloat(hPlayedInput) / parseFloat(hDealtInput);
document.getElementById("hr").innerHTML = hRate;
}
<button class="btnlost" onclick="handsPlayedMinus()">-</button>
<button class="btnwon" onclick="handsPlayedPlus()">+</button>
<p class="count" id="hp">1</p>
<button class="btnlost" onclick="handsDealtMinus()">-</button>
<button class="btnwon" onclick="handsDealtPlus()">+</button>
<p class="count" id="hd">2</p>
<button class="btnreset" type="button" onclick="handsPlayedRate()">Calculate Percent</button>
<p class="count" id="hr">0</p>
OUTLOOK:
I have a website which has a page called questions.html . In the page , there are many questions with answers. Each question is a div element. The answers is also a div and are hidden initially and is visible only when a button is clicked.
ATTEMPT & PROBLEM:
I have done it successfully for one set of question and answer , but when I do the same for another set the whole system gets messy. When I click on the button on the second question div , the answer div of the first question div shows up. But I want the button on the second question div to open the answer div of the second question div.
HTML :
<div id = "question1">
<div id = "answer1" style = "display:none;">This is the 1st answer</div>
<button id = "button1" onClick = "show()">Click For Answer</button>
</div>
<div id = "question2">
<div id = "answer2" style = "display:none;">This is the 1st answer</div>
<button id = "button2" onClick = "show()">Click For Answer</button>
</div>
JavaScript :
function show()
{
var div=document.getElementById("answer1");
var button=document.getElementById("button1");
div.style.display="block";
button.style.display="none";
}
I also noticed that it happens because my variables div and button wont select the div with the next set of ids (answer2 and button2)
MY APPROACH:
So I thought of creating a new function for each set of question and answer div. But this seems very unprofessional.
So is there any other way?
Thanks for the help :)
Pass the IDs as arguments:
function show(answerID, buttonID)
{
var div=document.getElementById(answerID);
var button=document.getElementById(buttonID);
div.style.display="block";
button.style.display="none";
}
Then the HTML would be:
<div id = "question1">
<div id = "answer1" style = "display:none;">This is the 1st answer</div>
<button id = "button1" onClick = "show('answer1', 'button1')">Click For Answer</button>
</div>
<div id = "question2">
<div id = "answer2" style = "display:none;">This is the 1st answer</div>
<button id = "button2" onClick = "show('answer2', 'button2')">Click For Answer</button>
</div>
If you can use jQuery,
$(".show-answer").on("click", function() {
$(this).siblings(".answer").css("display", "block");
$(this).css("display", "none");
});
.answer {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<div class="answer">This is the 1st answer</div>
<button class="show-answer">Click For Answer</button>
</div>
<div class="question">
<div class="answer">This is the 1st answer</div>
<button class="show-answer">Click For Answer</button>
</div>
Selection process becomes simple and HTML looks clean.
use previoussibling to show answers div and pass this for button
update there is problem with previoussibling that it consider text as node also so i have provided a function in working demo that can be used to overcome that problem
function show(obj)
{
var div=obj.previousSibling;
var button=obj
div.style.display="block";
button.style.display="none";
}
<div id = "question1">
<div id = "answer1" style = "display:none;">This is the 1st answer</div><button id = "button1" onClick = "show(this)">Click For Answer</button>
</div>
<div id = "question2">
<div id = "answer2" style = "display:none;">This is the 1st answer</div><button id = "button2" onClick = "show(this)">Click For Answer</button>
</div>
function show(obj)
{
console.log(obj.previousSibling)
var div=previousElementSibling(obj);
var button=obj
div.style.display="block";
button.style.display="none";
}
function previousElementSibling( elem ) {
do {
elem = elem.previousSibling;
}
while ( elem && elem.nodeType !== 1 );
return elem;
}
<div id = "question1">
<div id = "answer1" style = "display:none;">This is the 1st answer</div><button id = "button1" onClick = "show(this)">Click For Answer</button>
</div>
<div id = "question2">
<div id = "answer2" style = "display:none;">This is the 1st answer</div><button id = "button2" onClick = "show(this)">Click For Answer</button>
</div>
You don't need all that ID / class trickery,
also using inline JS is quite hard to maintain.
See this instead, where I've only used class="qa"
var qa = document.getElementsByClassName("qa");
function show(){
this.parentNode.getElementsByTagName("DIV")[0].style.display = (this.clicked^=1) ? "block" : "none";
}
for(var i=0; i<qa.length; i++)
qa[i].getElementsByTagName("BUTTON")[0].addEventListener("click", show, false);
div.qa > div{
display:none;
}
<div class="qa">
<div>This is the 1st answer</div>
<button>Click For Answer</button>
</div>
<div class="qa">
<div>This is the 1st answer</div>
<button>Click For Answer</button>
</div>
You can even use pure CSS for this, by just replacing button with a and usign the :target pseudo selector
div.qa > div{
display:none;
}
div.qa > div:target{
display:block;
}
<div class="qa">
<div id="one">This is the 1st answer</div>
Click For Answer
</div>
<div class="qa">
<div id="two">This is the 2nd answer</div>
Click For Answer
</div>
I am trying to figure out how to insert text from one text field to another using a button.
This is what I have so far:
function copy(ID_value) {
var textToCopy = document.getElementById(ID_value).innerHTML;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
HTML
<div id="opt">
<BUTTON id="1"onClick="copy(1);"> Option 1</BUTTON>
<BUTTON id="11"onClick="copy(11);"> Option 2</BUTTON><br>
<BUTTON id="2"onClick="copy(2);"> Option 3</BUTTON> or
<TEXTAREA ID="name" style="height:25px; width:300px;"></TEXTAREA>
<BUTTON id="3"onClick="copy(name);">Send</BUTTON><br>
<BUTTON id="4"onClick="copy(4);"> Option 4</BUTTON>
<BUTTON id="5"onClick="copy(5);"> Option 5</BUTTON>
<BUTTON id="6"onClick="copy(6);"> Option 6</BUTTON>
<BUTTON id="7"onClick="copy(7);"> Option 7</BUTTON>
<BUTTON id="8"onClick="copy(8);"> Option 8</BUTTON>
<BUTTON id="9"onClick="copy(9);"> Option 9</BUTTON>
<BUTTON id="10"onClick="copy(10);"> Option 10</BUTTON>
<p />
</div>
<TEXTAREA ID="text" style="height:100px; width:600px;">
</TEXTAREA>
Just as the buttons work, I need the "Send" button to send the text in the small field, to the large field, in any given order (Just as how each Option button inserts text in to the large field with proper spacing reguardless of order)
Any help would be greatly appreciated.
There are two problems in your question.
1) you are passing name not "name" so it will say name is undefined.
2) Because textbox has property value to get it's content your function is not working.
Leave your copy function as it is. Add one more function copyFromTextBox and call that on send button click.
<BUTTON id="3"onClick="copyFromTextbox();">Send</BUTTON><br>
function copyFromTextbox(id){
var textToCopy = document.getElementById('name').value;
var whereToCopy = document.getElementById("text");
whereToCopy.value += textToCopy;
}
I testing it desktop browsers: Firefox, Chrome, Safari.
<BUTTON id="3"onClick="if(document.getElementById('name').value!='')
text.value+=' '+document.getElementById('name').value">Send</BUTTON>
or
for(i=0;i<10;i++)document.querySelectorAll('button')[i].onclick=function(){
text.value+=this.innerHTML};
snd.onclick=function(){if(document.getElementById('name').value!='')
text.value+=' '+document.getElementById('name').value}
<div id="opt">
<button> Option 1</button>
<button> Option 2</button><br>
<button> Option 3</button> or
<textarea id="name" style="height:25px;width:300px"></textarea>
<input type="button" id="snd" value="Send"/><br>
<button> Option 4</button>
<button> Option 5</button>
<button> Option 6</button>
<button> Option 7</button>
<button> Option 8</button>
<button> Option 9</button>
<button> Option 10</button>
</div>
<br><br><textarea id="text" style="height:100px;width:600px"></textarea>
name. -not work. That question asked Jul 28 '14 at 4:55 Why that question is top on main page?
Your problem here is that your passing a number and not a string to the copy function.
Change copy(1) to copy('1') and things will work.
what you want to do is just copy the value of one text field into another. You can do this:
function copyToAnother()
{
var text1 = document.getElementById(id_of_first_text_field);
var text2 =document.getElementById(id_of_second_text_field);
text2.value = text1.value; // copy value of Ist field into second Field
}
and then on your copy button's onclick action reffer that function.
Try this code,This is a program similar to your question
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("text_to").value=a
}
</script>
</head>
<TEXTAREA ID="text_from" style="height:100px; width:600px;">
</TEXTAREA>
<TEXTAREA ID="text_to" style="height:100px; width:600px;">
</TEXTAREA>
<button onclick=copy_data(text_from)>Copy</button>
<html>
function copy() {
var areaA = document.getElementById("areaA");
var areaB = document.getElementById("areaB");
var valueA = areaA.value;
areaB.value = valueA;
}
just from a quick look you need to add "" to getElementById,
and use .value instead of innerHTML should work find.
here is a example. http://jsfiddle.net/6e67Y/