im trying to increment the id of an element everytime i click a button
im confused why its working when for innerHTML but not for id
my markup
<p id="demo"></p>
<button onclick="myfunction()">press me</button>
incrementing inner html
<script>
var a = 1;
function myfunction(){
document.getElementById("demo").innerHTML = a;
a++;
}
</script>
incrementing element variable id
<button onclick="myfunction()">press me</button>
<script>
var a = 1;
function myfunction(){
document.getElementById("demo").id = a;
a++;
}
</script>
Please enjoy this demo on storing an element into a variable for reuse. It looks like your issue was with trying to select the element by id after the id changed.
let cntr = 1;
const demo = document.getElementById("demo");
document.querySelector("button")
.addEventListener("click", function () {
const val = cntr % 4;
demo.id = "ele" + val;
cntr++;
});
.demo {
height: 5rem;
aspect-ratio: 1;
border-radius: 50%;
background: black;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
transition: background 1s;
}
#ele1 {
background: pink;
}
#ele2 {
background: lightblue;
}
#ele3 {
background: lightgreen;
}
<div id="demo" class="demo"><button>Clicky!</button></div>
Related
I'm trying to pass an anonymous function to the appendchild function.
I'm getting the following error message though:
Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.
Seems as if the anonymous function isn't returning the required type? In comparison, if I define a named function with the same code in it and pass that to the appendChild function I'm not getting an error.
See the following code for clarification:
// Option 1
function appendThis() {
var parent = document.getElementById("parent");
parent.appendChild(function () {
var child = document.createElement("div");
child.classList.add("child");
child.classList.add("red");
child.innerHTML = "appendThis()";
return child;
});
}
// Option 2
function appendThat() {
var parent = document.getElementById("parent");
var child = document.createElement("div");
child.classList.add("child");
child.classList.add("green");
child.innerHTML = "appendThat()";
parent.appendChild(child);
}
// Option 3
function createChild() {
var child = document.createElement("div");
child.classList.add("child");
child.classList.add("yellow");
child.innerHTML = "createChild()/appendThese()";
return child;
}
function appendThese() {
var parent = document.getElementById("parent");
parent.appendChild(createChild());
}
main{
height: 98vh;
width: 98vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button{
height: 50px;
width: 200px;
}
hr{
width: 200px;
}
.parent {
height: 100%;
width: 100%;
}
.child{
height: 30px;
width: 200px;
text-align: center;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
<body>
<main>
<div id="parent"></div>
<hr>
<button class="red" onclick="appendThis();">AppendThis</button>
<button class="green" onclick="appendThat();">AppendThat</button>
<button class="yellow" onclick="appendThese();">AppendThese</button>
</main>
</body>
parent.appendChild(function () {
var child = document.createElement("div");
child.classList.add("child");
child.classList.add("red");
child.innerHTML = "appendThis()";
return child;
});
You did not actually execute your function there.
You need to add () after the function definition, if you want to execute it at this point.
This is what's called an IIFE - Immediately-Invoked Function Expression. More details on that can be found here: What is the (function() { } )() construct in JavaScript?
I'm creating a tab menu like this:
function clear_selected() //sets all columns color black
{
var parent = document.querySelector("#container")
var items = document.querySelectorAll(".item")
var n = items.length;
for (var i = 0; i < n; i++)
items[i].style.backgroundColor = "";
}
function plus(itself) //adds another column
{
var parent = itself.parentElement;
var n = parent.childElementCount;
clear_selected();
var n = parent.querySelectorAll(".item").length;
var page = document.createElement("button");
page.className = "item";
page.style.backgroundColor = "blue";
page.textContent = "column"
page.onclick = function() {
clear_selected();
this.style.backgroundColor = "blue";
};
var temp = document.createElement("span");
temp.className = "del"
temp.innerHTML = "×"
temp.onclick = function() { //it's suppose to remove a column and color default as blue
document.querySelector("#main_item").style.backgroundColor = "blue" //THIS LINE ISN'T WORKING
this.parentElement.remove();
};
page.appendChild(temp);
parent.insertBefore(page, parent.childNodes[n]);
}
function see(el) {
clear_selected();
el.style.backgroundColor = "blue";
}
#container {
display: flex;
width: 100%;
height: 50px;
text-align: center;
background-color: yellow;
}
.item {
background-color: black;
color: white;
border: none;
outline: none;
cursor: pointer;
margin: 0.1rem;
padding: 0.1rem;
max-width: 100%;
}
.del {
background-color: red;
display: inline-block;
cursor: pointer;
border-radius: 50%;
width: 0.7rem;
margin-left: 2rem;
}
<div id="container">
<button class="item" id="main_item" style="background-color:blue;" onclick="see(this)">default column </button>
<button class="item" onclick="plus(this)">+</button>
</div>
but when I press the 'x' to remove a column, I want the default column to color blue, but the line of code which is suppose to achieve that isn't working
document.querySelector("#main_item").style.backgroundColor = "blue"
Before pressing 'x':
After pressing 'x' on the last column:
What it SHOULD look like:
I've losing sleep over this, can someone PLEASE tell me why isn't it working?
When you click on the "X", both of your onclick handlers are getting called, including the one that runs clear_selected, which sets the background color to "".
You can fix this by using stopPropagation on the event passed into the onclick function for the "x". That will stop the click event from going up the chain to the parent element of the "x".
temp.onclick = function(e) {
document.querySelector("#main_item").style.backgroundColor = "blue"
this.parentElement.remove();
e.stopPropagation();
};
So basically, I want to remove the appendChild element once it has been clicked. I tried to use this.remove(), but it does not work. I manually added some divs with h2 inside of it. When I clicked the div then, my code worked. When I clicked it, it did go away.
Code snippet
var div_children = document.getElementById("append-div").children;
var length = div_children.length;
for (var x = 0; x < length; x++){
div_children[x].addEventListener("click", function(){
this.remove();
});
}
function myfunction(){
var new_div = document.createElement("DIV");
new_div.innerHTML = "<h2>New div</h2>";
document.getElementById("append-div").appendChild(new_div);
}
#append-div{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#append-div div{
background-color: lightblue;
display: flex;
flex-direction: row;
border-radius: 45px;
border: 1px solid black;
width:fit-content;
height:fit-content;
}
#append-div div h2{
margin:20px;
}
<!DOCTYPE html>
<html>
<head>
<link = rel="stylesheet" type = "text/css" href="styles.css">
<title>Test</title>
</head>
<body>
<button class = "click-me" onclick = "myfunction()">Click Me!</button>
<div id = "append-div"></div>
</body>
</html>
The issue you were having before in the removal is that the first part of the code runs without any children and it never runs again even after you create new ones.
There's no need to loop through the children to add the event listener.
Just add it to the child right after you create the element.
function myfunction() {
var new_div = document.createElement("DIV");
new_div.innerHTML = "<h2>New div</h2>";
new_div.addEventListener("click", function() {
this.remove();
});
document.getElementById("append-div").appendChild(new_div);
}
#append-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#append-div div {
background-color: lightblue;
display: flex;
flex-direction: row;
border-radius: 45px;
border: 1px solid black;
width: fit-content;
height: fit-content;
}
#append-div div h2 {
margin: 20px;
}
<button class="click-me" onclick="myfunction()">Click Me!</button>
<div id="append-div"></div>
you could add the listener event when is created the element, as below:
function myfunction() {
var new_div = document.createElement("DIV");
new_div.innerHTML = "<h2>New div</h2>";
new_div.onclick = function () {
this.remove()
}
document.getElementById("append-div").appendChild(new_div);
}
<button class = "click-me" onclick = "myfunction()">Click Me!</button>
<div id = "append-div"></div>
Try doing this
document.getElementById("append-div").outerHTML = "";
It has support on cross browsers & IE 11+
https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
New to coding, especially javascript.
My function is not working. When I open the web page and click the button, the number still just appears as 100.
Any idea how to fix this so that with each click of the button the number increases by 1?
var number = document.getElementById("a");
var count = 0;
number.innerHTML = count;
number.onClick = function() {
count += 1;
};
.dev {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
<button id="a" class='dev'> </button>
Try:
<button id="a" onclick="increment();"> </button>
function increment()
{
var inc = parseInt(document.getElementById('a').value);
inc = isNaN(value) ? 0 : value;
inc++;
document.getElementById('a').value = inc;
}
Just spell onClick to 'onclick' and put 'number.innerHTML = count;' inside function.
<!DOCTYPE html>
<!-- CSS -->
<style>
dev {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
</style>
<!-- HTML -->
<html>
<button id="a">0 </button>
</html>
<!-- JAVASCRIPT -->
<script>
var number = document.getElementById("a");
var count = 0;
number.onclick = function() {
count += 1;
number.innerHTML = count;
};
</script>
Use the addEventListener and add the click event.
var number = document.getElementById("a");
var count = 0;
number.innerHTML = count;
number.addEventListener('click', function() {
const cnt = Number(number.innerHTML) + 1
number.innerHTML = cnt
});
dev {
display: block;
font-size: 30px;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
<html>
<button id="a"> </button>
</html>
number.onClick = function() {
count += 1;
};
onClick should be replaced with onclick
Javascript is a case sensitive language, so onClick and onclick are treated as 2 different words.
On clicking, you are just changing the value of count variable, but not updating DOM(Document Object Model).
So the final code should be
number.onclick = function() {
count += 1;
number.innerHTML = count;
};
Just put this line in the function
number.innerHTML = count;
.
number.onclick = function() {
count += 1;
number.innerHTML = count;
};
I want to print a lot of numbers ONE-BY-ONE with AJAX.
something like this: (each new line is update of previous line!)
output is:
1
12
123
1234
12345
123456
...
I tried a lot and read a lot of this same problem, but i couldn't find my right Answer.
The real problem is every FOR LOOP in javascript will NO affect the DOM after it will END the loop. I just want update the DOM inside the FOR LOOP while working on a long running job.
Please look at my code.
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var counter = 100; // i want assign counter = 2000000000
for (var i = 0; i < counter; i++) {
document.getElementById("print_here").innerHTML += i;
}
document.getElementById("foo").innerHTML = "done!";
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Thanks for any answer and help to solve this problem.
Your DOM is "locked" while it is being updated and redrawn ones the loop is done. You can free up the resource to let the DOM update each time wrapping your DOM change in a setTimeout, similar to:
setTimeout(function(){
document.getElementById("print_here").innerHTML += i;
},1);
To ensure setTimeout uses the correct value for i use let i instead of var i
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
}, 1);
}
document.getElementById("foo").innerHTML = "done!";
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
I want change the #foo into "done!" after the FOR statement is END
You could check if you are at your last item you process within the setTimeout, similar to:
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
var counter = 3000; // i want assign counter = 2000000000
for (let i = 0; i < counter; i++) {
setTimeout(function() {
document.getElementById("print_here").innerHTML += i;
if (i == counter - 1){
document.getElementById("foo").innerHTML = "done!";
}
}, 1);
}
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
You need to let the call stack complete so the browser can do its work on the page. If you bog down the one main thread, page updates aren't going to occur.
One way to do this is use setImmediate or nextTick. This is non-standard, so check this polyfill: https://www.npmjs.com/package/browser-next-tick
Basically, you do an iteration, then tell the browser to do the next iteration as soon as possible... and this occurs on a fresh call stack.
Here is the working code for you:
$("#btn").on("click", dowork);
function dowork() {
document.getElementById("foo").innerHTML = "working";
setTimeout(function() {
var i, j, row = 5;
var html = "";
for (i = 1; i <= row; i++) {
for (j = 1; j <= i; j++) {
html += "<span>" + j + "</span>";
}
html += "</br>";
}
console.log(html);
document.getElementById("print_here").innerHTML = html;
}, 50);
}
#btn {
background: #1f1f1f;
padding: 10px;
font-weight: bolder;
color: #fff;
width: 50%;
margin: auto;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#print_here {
overflow-wrap: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn">CLICK TO DO WORK</div>
<div id="foo"></div>
<div id="print_here"></div>
Rows is the number of rows you want to print.