Change Div Content with JavaScript, onmouseover and onmouseout? - javascript

I have the following code:
window.onload = function createDivs() {
for(var i = 1;i<29;i++) {
var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
var n1 = document.createTextNode("Cell " + i);
var n2 = document.createTextNode(i + " Cell");
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
body.appendChild(div);
}
div.onmouseover = function() {
this.appendChild(n1);
},
div.onmouseout = function() {
this.appendChild(n2);
}
}
what I want to acheive
on mouseover of each div, the div should have a text of cell 1, cell 2, ..... upto cel 28. But I am just getting Cell 28 on hover for each cell.
2. I also want to achieve that onmouseout, the cell should have "1 cell" as text, but its not working.
Any help is appreciated.
http://jsbin.com/iXuLEDE/7/edit?html,output

Your problem is coming from your closure over n1 and n2. The simplest solution to that is the following.
From this:
div.onmouseover = function() {
this.appendChild(n1);
}
To this:
div.onmouseover = (function(text) {
return function () {
this.innerHTML = text;
}
}(n1.textContent));
This way you are using a copy of the text node (by using it as a parameter to a function) rather than as a closure later on.
UPDATE
Just read the second part of your question, this should work:
div.onmouseover = (function(text) {
return function() {
this.innerHTML = text;
};
}("Cell " + i));
div.onmouseout = (function(text) {
return function() {
this.innerHTML = text;
};
}(i + " Cell"));
USING TEXT NODES
function createDivs() {
for(var i = 1;i<29;i++) {
var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
var n1 = document.createTextNode("Cell " + i);
var n2 = document.createTextNode(i + " Cell");
body.appendChild(div);
div.onmouseover = (function(n_text1, n_text2) {
return function() {
if (n_text2.parentNode == this) {
this.removeChild(n_text2);
}
this.appendChild(n_text1);
};
}(n1, n2));
div.onmouseout = (function(n_text1, n_text2) {
return function() {
if (n_text1.parentNode == this) {
this.removeChild(n_text1);
}
this.appendChild(n_text2);
};
}(n1, n2));
}
}
Fiddle here: http://jsfiddle.net/Mk5e5/

Please change the code like this
window.onload = function createDivs() {
for(var i = 1;i<29;i++) {
var div = document.createElement("div");
div.setAttribute("index", i);
var body = document.getElementsByTagName("body")[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
body.appendChild(div);
div.onmouseover = function() {
var n1 = document.createTextNode("Cell " + this.getAttribute("index"));
this.appendChild(n1);
} ,
div.onmouseout = function() {
var n2 = document.createTextNode(this.getAttribute("index") + " Cell");
this.appendChild(n2);
}
}
}
You should add event for each div in loop

Try to understand javascript closures, specially inside for loops. Check this excellent explanation in this blog post: http://www.mennovanslooten.nl/blog/post/62
Change your createDivs function to:
function createDivs() {
for(var i = 1;i<29;i++) {
var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
body.appendChild(div);
div.onmouseover = (function(value) {
return function() {
var n1 = document.createTextNode("Cell " + value);
this.appendChild(n1);
}
})(i);
div.onmouseout = (function(value) {
return function() {
var n2 = document.createTextNode(value + " Cell");
this.appendChild(n2);
}
})(i);
};
};

Your code doesn't work because when your onmouseover and onmouseout functions are executed, the value of your text variables is "cell 28." Also, your child removal was a little off, if I interpret your intentions correctly.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script type="text/javascript">
function createDivs(n) {
for(var i = 1; i <= n; i++) {
var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.border = "1px solid red";
div.style.cssFloat = "left";
div.style.margin = "1px"
div.className = i;
body.appendChild(div);
div.onmouseover = function() {
if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
var n_text = document.createTextNode("Cell " + this.className);
this.appendChild(n_text);
},
div.onmouseout = function() {
if (this.childNodes.length > 0) this.removeChild(this.childNodes[0]);
var n_text = document.createTextNode(this.className + " Cell");
this.appendChild(n_text);
}
}
}
createDivs(28)
</script>
</body>
</html>
I also changed your if statement so you pass the number of cells you want instead of the number of cells +1.

Related

blogspot.com List of all posts of the same tag

I created a new page on my blog and I would like to add there a list of all posts which include the same tag. For example: the tag name is "game" and I am looking for an JavaScript which will list all posts with images that contain tag "game".
Here I have already a code that lists popular posts:
<div class="widget-slimecuty-popular-posts">
<ul id="popular-li-container" style="list-style-type: none; padding: 0;">
<script type="text/javascript">
function loadXML(url) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
parseResponse(xmlRequest);
}
};
xmlRequest.open("GET", url, true);
xmlRequest.send();
}
function parseResponse(xml) {
var txtData = xml.responseText;
var parserDiv = document.createElement("div");
parserDiv.innerHTML = txtData;
var posts = parserDiv.getElementsByTagName("entry");
for (var i = 0; i < posts.length; i++) {
var links = posts[i].getElementsByTagName("link");
for (var j = 0; j < links.length; j++) {
if (links[j].getAttribute("rel") == "alternate") {
makeContainer(i);
var title = links[j].getAttribute("title");
var link = links[j].getAttribute("href");
makeTitle(title, i);
makeLink(link, i);
var content = posts[i].getElementsByTagName("content");
if (content.length == 0) break;
var parserContentDiv = document.createElement("div");
parserContentDiv.innerHTML = content[0].innerText;
var imgs = parserContentDiv.getElementsByTagName("img");
if (imgs.length == 0) break;
var imgurl = imgs[0].getAttribute("src");
makeImage(imgurl, i);
break;
}
}
}
}
function makeContainer(num) {
var li = document.createElement("li");
li.style.padding = "0";
var div = document.createElement("div");
var table = document.createElement("table");
table.style.width = "100%";
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.style.height = "72px";
td1.style.verticalAlign = "middle";
var td2 = document.createElement("td");
td2.style.width = "100%";
td2.style.verticalAlign = "middle";
var a1 = document.createElement("a");
a1.id = "popular-img-" + num;
a1.href = "javascript: void(0)";
a1.target = "_blank";
var a2 = document.createElement("a");
a2.id = "popular-title-" + num;
a2.href = "javascript: void(0)";
a2.target = "_blank";
a2.style.fontSize = "15pt";
td1.appendChild(a1);
td2.appendChild(a2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
div.appendChild(table);
li.appendChild(div);
document.getElementById("popular-li-container").appendChild(li);
}
function makeLink(link, num) {
document.getElementById("popular-title-" + num).setAttribute("href", link);
document.getElementById("popular-img-" + num).setAttribute("href", link);
}
function makeTitle(title, num) {
document.getElementById("popular-title-" + num).innerText = title;
}
function makeImage(imgurl, num) {
var img = document.createElement("img");
img.style.border = "1px solid black";
img.style.width = "72px";
img.style.height = "72px";
img.style.backgroundImage = "url('" + imgurl + "')";
var image = new Image();
image.src = imgurl;
if (image.width > image.height)
img.style.backgroundSize = "auto 100%";
else
img.style.backgroundSize = "100% auto";
img.style.backgroundPosition = "50% 50%";
img.style.backgroundRepeat = "no-repeat"
img.style.display = "inline-block";
img.style.maxWidth = "none";
document.getElementById("popular-img-" + num).appendChild(img);
}
function getPopularData() {
var url = "/feeds/posts/default?orderby=published";
loadXML(url);
}
window.onload = getPopularData;
</script>
</ul>
</div>
I tried to change this code, however without programming experience in JavaScript with blogger I couldn't do much.
To get blog posts for a specific label by XML feed (as in your code) use this url
http://yourBlogUrl/feeds/posts/default/-/LabelName
In Your code:
Replace var url = "/feeds/posts/default?orderby=published";
With var url = "/feeds/posts/default/-/game";
Note: Blogger labels are case sensitive, "game" different from "Game"
<div class="widget-slimecuty-popular-posts">
<ul id="popular-li-container" style="list-style-type: none; padding: 0;">
<script type="text/javascript">
function loadXML(url) {
var xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (xmlRequest.readyState == 4 && xmlRequest.status == 200) {
parseResponse(xmlRequest);
}
};
xmlRequest.open("GET", url, true);
xmlRequest.send();
}
function parseResponse(xml) {
var txtData = xml.responseText;
var parserDiv = document.createElement("div");
parserDiv.innerHTML = txtData;
var posts = parserDiv.getElementsByTagName("entry");
for (var i = 0; i < posts.length; i++) {
var links = posts[i].getElementsByTagName("link");
for (var j = 0; j < links.length; j++) {
if (links[j].getAttribute("rel") == "alternate") {
makeContainer(i);
var title = links[j].getAttribute("title");
var link = links[j].getAttribute("href");
makeTitle(title, i);
makeLink(link, i);
var content = posts[i].getElementsByTagName("content");
if (content.length == 0) break;
var parserContentDiv = document.createElement("div");
parserContentDiv.innerHTML = content[0].innerText;
var imgs = parserContentDiv.getElementsByTagName("img");
if (imgs.length == 0) break;
var imgurl = imgs[0].getAttribute("src");
makeImage(imgurl, i);
break;
}
}
}
}
function makeContainer(num) {
var li = document.createElement("li");
li.style.padding = "0";
var div = document.createElement("div");
var table = document.createElement("table");
table.style.width = "100%";
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.style.height = "72px";
td1.style.verticalAlign = "middle";
var td2 = document.createElement("td");
td2.style.width = "100%";
td2.style.verticalAlign = "middle";
var a1 = document.createElement("a");
a1.id = "popular-img-" + num;
a1.href = "javascript: void(0)";
a1.target = "_blank";
var a2 = document.createElement("a");
a2.id = "popular-title-" + num;
a2.href = "javascript: void(0)";
a2.target = "_blank";
a2.style.fontSize = "15pt";
td1.appendChild(a1);
td2.appendChild(a2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
div.appendChild(table);
li.appendChild(div);
document.getElementById("popular-li-container").appendChild(li);
}
function makeLink(link, num) {
document.getElementById("popular-title-" + num).setAttribute("href", link);
document.getElementById("popular-img-" + num).setAttribute("href", link);
}
function makeTitle(title, num) {
document.getElementById("popular-title-" + num).innerText = title;
}
function makeImage(imgurl, num) {
var img = document.createElement("img");
img.style.border = "1px solid black";
img.style.width = "72px";
img.style.height = "72px";
img.style.backgroundImage = "url('" + imgurl + "')";
var image = new Image();
image.src = imgurl;
if (image.width > image.height)
img.style.backgroundSize = "auto 100%";
else
img.style.backgroundSize = "100% auto";
img.style.backgroundPosition = "50% 50%";
img.style.backgroundRepeat = "no-repeat"
img.style.display = "inline-block";
img.style.maxWidth = "none";
document.getElementById("popular-img-" + num).appendChild(img);
}
function getPopularData() {
var url = "/feeds/posts/default/-/LabelName";
loadXML(url);
}
window.onload = getPopularData;
</script>
</ul>
</div>

Select element in webview not working

I Have created a modal inside the listview having input fields and select element. This list is shown up in webview of android. When I am clicking the input field, I am able to change the value inside it but when I am clicking the select field nothing happens even though I have the data inside that select list and even it is focussed by click listener. Can anyone please help me with it?
I am sharing the sample code:-
var modalInList = function(){
var originalList = document.getElementsByClassName("tt-menu");
var divElement = document.createElement("div")
divElement.id = "divToAdd";
var listElement = document.createElement("li");
listElement.id = "listToAdd";
var inputFieldForDose = document.createElement("input");
var inputFieldForFrequency = document.createElement("select");
var inputFieldForDays = document.createElement("input");
var take = document.createElement("span");
var tablet = document.createElement("span");
var forData = document.createElement("span");
var days = document.createElement("span");
take.innerHTML = "Take"
tablet.innerHTML = "Tablet"
forData.innerHTML = "for"
days.innerHTML = "Days"
divElement.appendChild(take);
inputFieldForDose.id = "doseList";
inputFieldForFrequency.id = "frequencyList";
inputFieldForDays.id = "daysList";
inputFieldForDose.contentEditable = 'true'
inputFieldForFrequency.contentEditable = 'true'
inputFieldForDays.contentEditable = 'true'
inputFieldForDose.style.color = "black";
inputFieldForDose.style.width = "45px";
inputFieldForDose.style.marginLeft = "1px";
inputFieldForDose.style.marginRight = "1px";
inputFieldForDose.style.textAlign = "center";
inputFieldForDose.style.padding = "1px";
inputFieldForDose.style.border = "solid 1px #c9c9c9";
inputFieldForFrequency.style.color = "black";
inputFieldForFrequency.style.width = "auto";
inputFieldForFrequency.style.marginLeft = "1px";
inputFieldForFrequency.style.marginRight = "1px";
inputFieldForFrequency.style.padding = "1px";
inputFieldForFrequency.style.border = "solid 1px #c9c9c9";
inputFieldForDays.style.color = "black";
inputFieldForDays.style.width = "45px";
inputFieldForDays.style.marginLeft = "1px";
inputFieldForDays.style.marginRight = "1px";
inputFieldForDays.style.marginTop = "2px";
inputFieldForDays.style.textAlign = "center";
inputFieldForDays.style.padding = "1px";
inputFieldForDays.style.border = "solid 1px #c9c9c9";
inputFieldForDose.setAttribute('type', 'number');
inputFieldForDays.setAttribute('type', 'number');
if (inputFieldForFrequency.selectedIndex == -1) {
var start = '';
var len = prescriptionFrequenciesData.length;
for (var i = 0; i < len; i++) {
start += '<option value="' + prescriptionFrequenciesData[i].value + '">' + prescriptionFrequenciesData[i].title;
}
inputFieldForFrequency.innerHTML = start;
}
inputFieldForFrequency.required = true;
divElement.appendChild(inputFieldForDose);
divElement.appendChild(tablet);
divElement.appendChild(inputFieldForFrequency);
divElement.appendChild(forData);
divElement.appendChild(inputFieldForDays);
divElement.appendChild(days);
listElement.appendChild(divElement);
originalList[0].prepend(listElement);
inputFieldForDose.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDose.focus();
$(".tt-menu").show();
inputFieldForDose.focus();
})
inputFieldForFrequency.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForFrequency.focus();
$(".tt-menu").show();
inputFieldForFrequency.focus();
})
inputFieldForDays.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDays.focus();
$(".tt-menu").show();
inputFieldForDays.focus();
})
}
Here inputFieldForDays is the element for element. and $(".tt-menu") is used for bloodhound.js list

Remove a dynamically added _parent_ div

I have a function which dynamically adds div, what i need is a button inside, which deletes this div. Eg: on click of a button, a div is added, with a button inside. On click of that button, the div is removed. Here's my code for addition of divs:
function newTextQuestion() {
var div = document.createElement('div');
div.style.borderLeft = "3px solid #00897b";
div.style.marginBottom = "20px";
div.style.paddingLeft = "10px";
div.style.backgroundColor = "white";
div.className = 'q';
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>';
document.getElementById('questionnaireDiv').appendChild(div);
}
--- EDIT ---
What i've tried so far:
function newTextQuestion() {
var div = document.createElement('div');
div.style.borderLeft = "3px solid #00897b";
div.style.marginBottom = "20px";
div.style.paddingLeft = "10px";
div.style.backgroundColor = "white";
var delbutton = document.createElement('button');
var delbuttontext = document.createElement('X');
delbutton.appendChild(delbuttontext);
delbutton.setAttribute("onclick", function() { $(this).parent().remove(); });
div.appendChild(delbutton);
div.className = 'q';
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
div.innerHTML = '<h5>Tekstiküsimus:</h5><input class="text" name="' + name + '" type="text" placeholder="Küsimuse tekst..." oninvalid="this.setCustomValidity(\'\See väli on kohustuslik!\'\)" oninput="setCustomValidity(\'\'\)" required>';
document.getElementById('questionnaireDiv').appendChild(div);
}
When you need event handling capabilities, don't create an element via .innerHTML, use the document.createElement() technique. To create the button, just follow the same technique that you had already started.
Also, it's best to work with CSS classes when you can instead of setting individual properties.
var parent = document.getElementById('questionnaireDiv');
function newTextQuestion() {
var div = document.createElement('div');
div.classList.add("newDiv");
div.classList.add("q");
div.setAttribute('data-type', '0');
var name = "random-" + parseInt(Math.random() * 1000000000);
var h5 = document.createElement("h5");
var input = document.createElement("input");
input.type = "text";
input.classList.add("text");
input.placeholder = "Küsimuse tekst...";
input.required = true;
input.addEventListener("invalid", function(){
this.setCustomValidity("\'See väli on kohustuslik!\'");
});
input.addEventListener("input", function(){
this.setCustomValidity("");
});
var btn = document.createElement("button");
btn.textContent = "Delete";
div.appendChild(h5);
div.appendChild(input);
div.appendChild(btn);
btn.addEventListener("click", function(){
parent.removeChild(div);
});
parent.appendChild(div);
}
newTextQuestion();
.newDiv {
border-left: 3px solid #00897b;
margin-bottom: 20px;
padding-left: 10px;
background-color:"white";
}
<div id="questionnaireDiv"></div>

Trying to return .nextSibling div value

I'm on my first week in a coding bootcamp, and I'm working through a class project where we create DOM elements with js. I have created a button that will add a div to my html when it is pressed, and I've also added several other events such as .onclick and .onmouseover. Each div's id is set to the .length of the div's that share the same class name. I am trying to have the nextsibling div removed, when a div is clicked on and the id of that div is an even number, but I'm getting a returned value of 'null'. I can't figure out what I'm missing...any help would be appreciated!
Here is my full code:
document.addEventListener('DOMContentLoaded', function() {
var button = document.createElement('button');
button.innerHTML = "button";
button.id = "boxButton";
document.body.appendChild(button);
document.getElementById("boxButton").onclick = function() {buttonClick()};
var colors = ['red', 'yellow', 'blue', 'green', 'orange']
function buttonClick() {
var mainDiv = document.createElement('div');
var box = document.createElement('div');
box.className = "black-box";
document.body.appendChild(mainDiv);
mainDiv.appendChild(box);
var divCounter = document.getElementsByClassName('black-box');
var divNumber = divCounter.length.toString();
box.id = divNumber;
box.onmouseover = function() {
document.getElementById(divNumber).innerHTML = divNumber;
box.className = 'hover-box';
}
box.onmouseleave = function() {
box.className = "black-box";
}
box.onclick = function() {
var randomColor = colors[Math.floor(Math.random()*colors.length)];
document.getElementById(divNumber).style.backgroundColor = randomColor;
}
box.ondblclick = function() {
if (divNumber % 2 === 0) {
var nextDiv = document.getElementById(divNumber).nextSibling;
console.log(nextDiv) <-- getting a 'null' value to console -->
}
}
}
});
I've cleaned up the code a bit and tried to show you that you should only add maindiv once, and not on every button click, then your black-box's will be siblings.
document.addEventListener('DOMContentLoaded', function() {
// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
var colors = ['red', 'yellow', 'blue', 'green', 'orange'];
var mainDiv = document.createElement('div');
mainDiv.id = 'mainDiv';
var button = document.createElement('button');
button.textContent = 'button';
button.id = 'boxButton';
button.addEventListener('click', function() {
var box = document.createElement('div');
box.id = document.getElementsByClassName('black-box').length + 1;
box.className = 'black-box';
box.addEventListener('mouseover', function(evt) {
evt.target.textContent = evt.target.id;
box.className = 'hover-box';
}, false);
box.addEventListener('mouseleave', function() {
box.className = 'black-box';
}, false);
box.addEventListener('click', function(evt) {
var randomColor = colors[getRandomInt(0, colors.length)];
evt.target.style.backgroundColor = randomColor;
}, false);
box.addEventListener('dblclick', function(evt) {
if (evt.target.id % 2 === 0) {
var nextDiv = evt.target.nextSibling;
console.log(nextDiv);
}
}, false);
mainDiv.appendChild(box);
}, false);
document.body.appendChild(button);
// only want to add this once, not on every click
document.body.appendChild(mainDiv);
}, false);
#mainDiv {
border: 1px solid black;
}
.black-box {
height: 1em;
width: 100%;
border: 1px solid black;
}

JavaScript Function which counts number of DOM elements

I need to write a function which counts types of elements in the DOM
function setNumbers(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var span = document.createElement('span');
span.style.background = 'black';
var anchors = document.getElementById('anchors');
var buttons = document.getElementById('buttons');
var text = document.getElementById('text');
var events = document.getElementById('events');
var elements = document.getElementsByTagName("*");
for(var i =0; i<elements.length; i++){
if (elements[i].nodeName === 'A') {
a++;
span.innerHTML = "anchors - " + a;
span.style.border = '1px solid yellow';
span.style.color = 'yellow';
anchors.appendChild(span);
}
if (elements[i].nodeName === 'TEXTAREA' || elements[i].nodeName === 'INPUT' ) {
b++;
span.innerHTML = "textfields - " + b;
span.style.border = '1px solid orange';
span.style.color = 'orange';
text.appendChild(span);
}
if (elements[i].nodeName === 'BUTTON') {
c++;
span.innerHTML = "buttons - " + c;
span.style.border = '1px solid green';
span.style.color = 'green';
buttons.appendChild(span);
}
if (elements[i].onclick) {
d++;
span.innerHTML = "events - " + d;
span.style.border = '1px solid pink';
span.style.color = 'pink';
events.appendChild(span);
}
}
}
setNumbers();
Here is the code. The function has to append the number of elements in relevant div, but appends only textarea elements. Can you please check my function and tell where I missed something? Thanks
Here is the fiddle
You use the same span variable across the scope, so it is override everytime. The last element in your HTML matching if is textarea, so it is the last type being counted.
Shortest fix: remove span and use this instead:
if (elements[i].nodeName === 'A') {
a++;
anchors.innerHTML = "anchors - " + a;
anchors.style.border = '1px solid yellow';
anchors.style.color = 'yellow';
}
PS: better idea would be to create a function counting elements of a specified kind (eg. setNumbers(type)), now you repeat yourself many times and use global selector * choosing all the items, even though you need only these matching a, textarea etc.
Try this out:- http://jsfiddle.net/acguvd4f/8/
JS:-
function setNumbers(){
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var anchors = document.getElementById('anchors');
var buttons = document.getElementById('buttons');
var text = document.getElementById('text');
var events = document.getElementById('events');
var elements = document.getElementsByTagName("*");
for(var i =0; i<elements.length; i++){
var span = document.createElement('span');
span.style.background = 'black';
if (elements[i].nodeName === 'A') {
a++;
span.innerHTML = "anchors - " + a;
span.style.border = '1px solid yellow';
span.style.color = 'yellow';
anchors.appendChild(span);
}
if (elements[i].nodeName === 'TEXTAREA' || elements[i].nodeName === 'INPUT' ) {
b++;
span.innerHTML = "textfields - " + b;
span.style.border = '1px solid orange';
span.style.color = 'orange';
text.appendChild(span);
}
if (elements[i].nodeName === 'BUTTON') {
c++;
span.innerHTML = "buttons - " + c;
span.style.border = '1px solid green';
span.style.color = 'green';
buttons.appendChild(span);
}
if (elements[i].onclick) {
d++;
span.innerHTML = "events - " + d;
span.style.border = '1px solid pink';
span.style.color = 'pink';
events.appendChild(span);
}
}
}
setNumbers();

Categories