dynamicall add p element on mouse click using javascript - javascript

I need a code to display some message on every onclick event of a button using JavaScript
enter code here
<!DOCTYPE>
<html>
<head>
<script>
function addElement() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
ni.appendChild(newdiv);
}
</script>
</head>
<body>
<div id='myDiv'>
<input type="button" value="click" onclick="addelement()">
<p id='theValue'></p>
</div>
</body>
</html>

check your function name
replace this
onclick="addElement()"

Related

Adding string to child elements of div class

I have the following script, which is not doing what I want it to do:
<html>
<body>
<div class="test">
<div class="one">sdas</div >
<div class="two">adsa</div >
<div class="three">sad</div >
<div class="four">sada</div >
</div>
<br /><br /><br />
<div id="DIV2">
</div>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var MyDiv2 = document.getElementById('DIV2');
var doc = document.getElementsByClassName("test");
var str = 'str';
for (var i = 0; i < doc.length; i++) {
MyDiv2.innerHTML = doc[i].innerHTML + str;
}
}
</script>
</body>
</html>
Once the button is pushed, it outputs this:
sdas
adsa
sad
sada
sdas
adsa
sad
sada
str
However, I would like to have the following output:
sdas
adsa
sad
sada
sdas
str
adsa
str
sad
str
sada
str
So for each child class, str should be added. How can I achieve this?
I suggest you to change the doc variable selector using querySelectorAll like that:
function myFunction() {
// ...
var doc = document.querySelectorAll(".test span");
var str = 'str';
for (var i = 0; i < doc.length; i++) {
MyDiv2.innerHTML += doc[i].innerHTML + ' ' + str + ' ';
}
}
Update
You changed from span to div, so you can use doc = document.querySelectorAll(".test div") if you only want the divs.
To get all children in general, you can use doc = document.querySelector(".test").children.
Use querySlectorAll & target the div and its child spans. In your code doc[i].innerHTML will give the child span elements, but the variable str is suppose to add to the textContent
function myFunction() {
// a new variable which will be concatenation of all the text
var newString = ''
var MyDiv2 = document.getElementById('DIV2');
var doc = document.querySelectorAll(".test span");
var str = 'testString';
for (var i = 0; i < doc.length; i++) {
// trim is used to remove any white space
newString += doc[i].textContent.trim() + str + ' ';
}
MyDiv2.innerHTML = newString
}
<div class="test">
<span class="one">sdas</span>
<span class="two">adsa</span>
<span class="three">sad</span>
<span class="four">sada</span>
</div>
<br /><br /><br />
<div id="DIV2">
</div>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="myFunction()">Try it</button>
Here you go.
Take a new variable i.e. output, push the results into this array while looping. Once done with loop, join the array. Please note that I am using id selector on div now.
<body>
<div class="test" id="test">
<div class="one">sdas</div >
<div class="two">adsa</div >
<div class="three">sad</div >
<div class="four">sada</div >
</div>
<br /><br /><br />
<div id="DIV2">
</div>
<p>Click the button to change the text of the first list item (index 0).</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var MyDiv2 = document.getElementById('DIV2');
var items = document.getElementById("test").children;
var str = 'str';
var output = [];
for (var i = 0; i < items.length; i++) {
output.push(`${items[i].innerHTML} <br /> ${str} <br />`);
}
MyDiv2.innerHTML = output.join("");
}
</script>
</body>

How to add JavaScript to button where it will generate another button linking to another page?

i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>

Closing modal /popup box will not work

I cannot work out why, when I click 'x', the modal box/pop up will not close. It is completely unresponsive.
Here is the JavaScript:
var kite = document.getElementById("poptext");
var kitetwo = document.getElementById("poptexttwo");
var closebtn = document.getElementById("close");
function seltst() {
var kite = document.getElementById("poptext");
var closebtn = document.getElementById("close");
kite.style.display = 'block';
setTimeout(el, 2000);
kite.style.width = "500px";
}
function el() {
kite.style.display = 'block';
}
function closepop() {
kite.style.display = "none";
}
and here is the HTML:
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
Answers only in pure JavaScript please.
Lots of redundant code, after clean up this is what you got:
On click hide poptext, on select (highlight) show poptext
ALSO: make sure your script is just before </body> and must after all other html, in my example if you move the script above p will not work, why?
Because when page load you are calling var kite = document.getElementById("poptext"); but the element is not loaded yet.
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
<script>
var kite = document.getElementById("poptext");
function seltst() {
kite.style.display = 'block';
kite.style.width = "500px";
}
function closepop() {
kite.style.display = "none";
}
</script>
But if you do this will work, you define kite inside the function, so when the function is called (the element already loaded):
<script>
function seltst() {
var kite = document.getElementById("poptext");
kite.style.display = 'block';
kite.style.width = "500px";
}
function closepop() {
var kite = document.getElementById("poptext");
kite.style.display = "none";
}
</script>
<p>
<input readonly type="text" value="a random value" id="tbox" onselect="seltst()">
</p>
<div id="poptextcont">
<div id="poptext">
<span id="close" onclick="closepop()">×</span>
<p id="poptexttwo">
lots of text about stuffContact us more text!
</p>
</div>
</div>
Your kite variable is defined at the global scope, however not defined in the function you're trying to call. Normally that would be fine, however, it seems it is declared before the DOM has loaded.
Redeclare that variable within the closePop function and you will be fine.
function closepop() {
var kite = document.getElementById("poptext");
kite.style.display = "none";
}

add div using appendChild

This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>

can't update a div inside another div element with innerHTML method?

<!DOCTYPE html>
<html>
<head>
<title>Business Card</title>
<script type="text/javascript">
window.onload = init;
function init(){
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields(){
document.getElementById("businessCard").innerHTML = "Business Card Info";
document.getElementById("name").innerHTML = "Name";
}
</script>
</head>
<body>
<div id="businessCard">
<div id="name"></div>
</div>
<input type="button" value="populate fields" id="populateFields">
</body>
</html>
I can see div with id, 'businessCard' updated with "Business Card Info" but, I the div inside that with id 'name' is not getting updated.
innerHTML on outer div clears out your inner div . save the inner div before using innerHTML on outer div.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
//save inner div
var innerdiv = document.getElementById("name");
innerdiv.innerHTML = "Name";
var outerdiv = document.getElementById("businessCard");
outerdiv.innerHTML = "Business Card Info";
// add inner div back
outerdiv.appendChild(innerdiv);
}
<div id="businessCard">sme
<div id="name">fdfdf</div>
</div>
<input type="button" value="populate fields" id="populateFields">
Since some say innerHTML is evil because of it's consequences in DOM. Another solution is to use .firstChild.nodeValue.
window.onload = init;
function init() {
var button = document.getElementById("populateFields");
button.onclick = updateFields;
}
function updateFields() {
document.getElementById("businessCard").firstChild.nodeValue = "Business Card Info";
document.getElementById("name").firstChild.nodeValue = "Name";
}
<div id="businessCard">
<div id="name"> </div>
</div>
<input type="button" value="populate fields" id="populateFields">

Categories

Resources