In console if I type this command:
document.querySelectorAll('div.information div.contact div ')[1]
The result I take is
<span class="information">
<call>number 1</call>
<call>number 2</call>
</span>
How can I take the innerHTML of call element? Should I use the nth child?
Result:
number 1
and after another command
number 2
Try this,
HTML
<span class="information">
<call>number 1</call>
<call>number 2</call>
</span>
JavaScript
var values = [];
var elements = document.getElementsByTagName('call');
for (var i = 0; i < elements.length; i++) {
values.push(elements[i].innerHTML);
}
/** ["number 1", "number 2"] **/
console.log(values);
Example
JSFiddle
There's no "call" element.
document.getElementsByClassName() is probably more appropriate in this case, but using an ID would be even easier.
window.onload = function() {
var information = document.getElementsByClassName('information')[0]
var calls = document.getElementsByClassName('call');
var numbers = [];
for (var i = 0; i < calls.length; i++) {
numbers.push(calls[i].innerHTML);
}
for (var i = 0; i < numbers.length; i++) {
document.getElementById('numbers').value += numbers[i] + '\n';
}
}
<span class="information">
<span class="call">number 1</span>
<span class="call">number 2</span>
</span>
<h2>Added so we can see something without looking at the console:</h2>
<form name="form" id="form">
<textarea id="numbers"></textarea>
</form>
<html>
<head>
<title>
Practice
</title>
</head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = document.getElementsByTagName("call");
for(var i=0;i<data.length;++i)
{
var scope = $(data[i]).html();
console.log(scope);
}
});
</script>
<body>
<span class="information">
<call>number 1</call>
<call>number 2</call>
</span>
</body>
Related
I have some elements have same class name and i insert their innerHTML in another element have classname "show". Expected output is 12345 but it is only show last element's innerHTML(5). Here is my code snippet;
source = document.getElementsByClassName("source");
show = document.getElementsByClassName("show");
for(var i = 0; i < source.length; i++)
show[0].innerHTML = source[i].innerHTML;
.show{
display:block;
}
<span class="source">1</span>
<span class="source">2</span>
<span class="source">3</span>
<span class="source">4</span>
<span class="source">5</span>
<span class="show"></span>
You can use .reduce() to concatenate the HTML to an accumulator for each element. Array.from simply allows you to use .reduce() on an array of DOM elements:
var source = Array.from(document.getElementsByClassName("source"))
var show = document.getElementsByClassName("show")[0];
show.innerHTML = source.reduce((a, el) => a += el.innerHTML, '')
.show {
display: block;
}
<span class="source">1</span>
<span class="source">2</span>
<span class="source">3</span>
<span class="source">4</span>
<span class="source">5</span>
<span class="show"></span>
Add + for adding number show[0].innerHTML += source[i].innerHTML;
source = document.getElementsByClassName("source");
show = document.getElementsByClassName("show");
debugger;
for(var i = 0; i < source.length; i++){
show[0].innerHTML += source[i].innerHTML;
}
.show{
display:block;
}
<span class="source">1</span>
<span class="source">2</span>
<span class="source">3</span>
<span class="source">4</span>
<span class="source">5</span>
<span class="show"></span>
Use show[0].innerHTML += source[i].innerHTML;
source = document.getElementsByClassName("source");
show = document.getElementsByClassName("show");
for(var i = 0; i < source.length; i++)
show[0].innerHTML += source[i].innerHTML;
.show{
display:block;
}
<span class="source">1</span>
<span class="source">2</span>
<span class="source">3</span>
<span class="source">4</span>
<span class="source">5</span>
<span class="show"></span>
I'm trying to change the individual product prices on my page, since the encoding is all messed up thanks to the e-commerce platform i use. I'm needing to split on a £ sign, which seems to work well for individual items
I've tried changing the way I do this by using getElementID, but it's no good due to how the e-commerce platform operates, and I can't change any backend stff.
<div class="products-price">
<!--START: ITEMPRICE-->
<span class="subfix">[ITEMPRICE]</span>
<!--END: ITEMPRICE-->
</div>
jQuery(document).ready(function () {
var total = document.getElementsByClassName('subfix')
for (i = 0; i < total.length; i++) {
total[i].textContent.split('£')[1];
}
});
You also have to set the text to that element
jQuery(document).ready(function() {
var total = document.getElementsByClassName('subfix')
for (i = 0; i < total.length; i++) {
total[i].textContent=total[i].textContent.split('£')[1];
}
});
<div class="products-price">
<span class="subfix"> </span>
</div>
If I understand your question correctly you would like to change the price, but the currency symbol is what makes it difficult?
You could acheive it like this:
jQuery(document).ready(function() {
var total = document.getElementsByClassName('subfix')
for (i = 0; i < total.length; i++) {
var price = parseInt(total[i].textContent.split('£')[1])
var newPrice = price + 5;
total[i].textContent = "£" + newPrice;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="products-price">
<span class="subfix">£4</span>
</div>
<div class="products-price">
<span class="subfix">£8</span>
</div>
<div class="products-price">
<span class="subfix">£32</span>
</div>
<div class="products-price">
<span class="subfix">£2</span>
</div>
<div class="products-price">
<span class="subfix">£12</span>
</div>
<div class="products-price">
<span class="subfix">£6</span>
</div>
.split('£').pop();
If you want the last element returned use .pop(), then overwrite the <span> with .textContent in same iteration. .split() can use regular expressions and regex can now match unicode. The following is a regex that matches a standard pound symbol and a full width pound symbol in unicode:
/\u{a3}|\u{ffe1}/u
Demo
var total = document.getElementsByClassName('subfix')
for (i = 0; i < total.length; i++) {
var price = total[i].textContent.split(/\u{a3}|\u{ffe1}/u).pop();
total[i].textContent = price;
console.log(price);
}
span {
display: block;
}
.as-console-wrapper {
width: 50%;
margin-left: 50%;
min-height: 100%;
}
<div class="products-price">
<span class="subfix">£10.00</span>
<span class="subfix">£53.00</span>
<span class="subfix">£101.09</span>
<span class="subfix">£90.01</span>
<span class="subfix">£22.00</span>
<span class="subfix">£18.55</span>
<span class="subfix">£10.20</span>
<span class="subfix">£70.67</span>
I have content with same id but only the first content excute the function from id, how can i add number to each id Ex id="file0", id="file1" id="file2" etc.
<a id="test" class="list">Rice</a>
<a id="test" class="list">Beans</a>
<a id="test" class="list">Suji</a>
Here is my javaScript
var elements = document.getElementsByClassName("list");
var id = '';
for(var i=0; i<elements.length; i++) {
id += elements[i].class;
}
document.write(id);
Maybe this is what you are looking for. I have removed the id's from the HTML and added them with Javascript:
<html>
<head></head>
<body>
<a class="list">Rice</a>
<a class="list">Beans</a>
<a class="list">Suji</a>
<script type="text/javascript">
var className = "list";
var elements = document.getElementsByClassName(className);
for(var i=0; i<elements.length; i++) {
elements[i].setAttribute("id", className + i);
}
</script>
</body>
</html>
Try this:
<html>
<head></head>
<body>
<a class="list">Rice</a>
<a class="list">Beans</a>
<a class="list">Suji</a>
<script type="text/javascript">
var elements = document.getElementsByClassName("list");
for(var i=0; i<elements.length; i++) {
element[i].id += elements[i].class + i;
}
</script>
</body>
</html>
It gives you id like list1,list2 and list3.
I'm attempting to navigate the DOM tree and retrieve html comments and display them in alert box. This is as far as I can get, my alert box keeps returning empty. How do I properly display a nodeList array? I've searched for hours and cant seem to find any info that makes sense.
<!DOCTYPE html>
<html>
<head>
<title>Hidden Comments</title>
<h1 style="text-align:center">Hidden Comments</h1>
<script>
function concatComs(){
var c=document.getElementById('body');
var array=[];
for(var i=0;c.childNodes.length<i;i++){
if(c.childNodes[i].nodeType==8) array[i]=c[i];
}
alert(array.toString());
}
</script>
</head>
<body id="body" style="text-align: center">
<!--you-->
<h2>Find the hidden comments!</h2>
<p>Look closely and you'll find them!</p><!--found-->
<input type="button" value="Go!" onClick="concatComs()"/>
<!--them-->
</body>
</html>
Your for loop should start like:
for(var i=0; i < c.childNodes.length; i++){
Additionally, you probably want to add c.childNodes[i] to your array.
function concatComs(){
var c = document.getElementById('body');
var array=[];
for(var i=0; i < c.childNodes.length; i++){
if(c.childNodes[i].nodeType==8) {
array.push(c.childNodes[i]);
}
}
var result = "";
for(i in array) {
result += array[i].textContent + " ";
}
document.write(result);
}
<div id="body" style="text-align: center">
<!--you-->
<h2>Find the hidden comments!</h2>
<p>Look closely and you'll find them!</p><!--found-->
<input type="button" value="Go!" onClick="concatComs()"/>
<!--them-->
</div>
You can select comment strings with a regex expression like this
match(/<!--.*?-->/g)
then you can trim the first 4 and last 3 letter for each string
substr(4,comments[i].length-7)
Final result is like this
<!DOCTYPE html>
<html>
<head>
<title>Hidden Comments</title>
<script>
function concatComs(){
var comments = document.body.innerHTML.match(/<!--.*?-->/g);
for (var i = 0; i < comments.length; i++)
comments[i] = comments[i].substr(4,comments[i].length-7);
alert(comments);
}
</script>
</head>
<body id="body" style="text-align: center">
<h1 style="text-align:center">Hidden Comments</h1>
<!--you-->
<h2>Find the hidden comments!</h2>
<p>Look closely and you'll find them!</p><!--found-->
<input type="button" value="Go!" onClick="concatComs()"/>
<!--them-->
</body>
</html>
btw you should place your h1 tag inside the body not head.
Can someone help out here? i have this project going on... i want that when the list items in the 'players' array are clicked, they should move to the 'actual-players' list. i want to use an event listener.... below are my codes...
JAVASCRIPT
function init(){
var players = ["Player1", "Player2", "Player3", "Player4",
"Player5"];
var listItems = document.getElementById("first");
for (var i = 0; i < players.length; i++){
var newPlayersList = document.createElement("li");
newPlayersList.ClassName = "list-item";
var listItemsValue = document.createTextNode(players[i]);
newPlayersList.appendChild(listItemsValue);
listItems.appendChild(newPlayersList);
}
//Below is where i write the codes to set the elements of the 'players' array to move to the 'actual-players' list. But it doesn't work!
var players = document.getElementsByClassName("list-item");
for(var i=0; i<players.length; i++){
players[i].addEventListener("click", function(){
var text = this.innerHTML;
var liElement = document.createElement("li");
liElement.ClassName = "test";
var text = document.createTextNode(text);
liElement.appendChild(text);
var lis = document.getElementById("actual-
players").getElementsByTagName("li");
if (lis.length == 4){
alert("Don't let more than four players");
} else {
document.getElementById("actual-
players").appendChild(liElement);
this.remove();
}
});
}
}
window.onload = function(){
init();
};
HTML
<html>
<head>
<title>Table Soccer Teams</title>
<link rel="stylesheet" type="text/css" href="soccer.css" />
<script type="text/javascript" src="table_soccer.js" ></script>
</head>
<body>
<a id="reset" href="javascript:location.reload(true)"
class="btn">Reset</a>
<div id="soccer_field">
<div class="players" onsubmit="return(validateForm ());">
<h2>Possible Players</h2>
<ul id="first"></ul>
<p class="one">Click on names above <br>to select actual
players</p>
</div>
<div class="actual_players">
<h3>Actual Players</h3>
<ul id="actual-players" ></ul>
<p class="two">Click button below to <br>generate Teams</p>
<br>
<a id="generate" href ="#" class="btn">Click here</a>
</div>
</div>
</body>
</html>