How to loop through the inner elements within 'document.querySelector' [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 days ago.
Improve this question
I am using chrome devtools to inspect html. I have this code where I apply querySelector for inner elements:
var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i=0; i<x.length; i++){
const href = x[i].querySelector('.ahchor[href]');
const text = x[i].querySelector('.text-field');
myarray.push([href, text]);
};
The querySelector does not exists on x[i], getting an error Uncaught TypeError: [...].querySelector is not a function how to fix that?
here is the html sample, in reality there is a lot of li's wthin:
<ul class="search__results-list">
<li class="search__result-container">
<div class="search-result">
<div class="search-result__item">
<div class="search-result_block">
<div class="center">
<a class="ahchor" href="somesite.com/a">
<div>
<div class="wrapper">
<div class="entity">
<div class="text-field">content here</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>

In your code syntax errors
Should be:
var x = document.querySelectorAll(".search__results-list li");
var myarray = []
for (var i = 0; i < x.length; i++) {
const href = x[i].querySelector('.ahchor[href]');
const text = x[i].querySelector('.text-field');
myarray.push([href, text]);
};
This code should work if you wrote classes correctly and accordingly to your html
You can check this code even in console there, works fine. But I didn't find wrappers with 2 elements and use .m6 twice

enter image description here
I used the Chrome development tool to achieve this. I found that according to your code, you can achieve logic without error. You can run the code several times.

Related

Why the Value attribute is not added to the HTML? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I have a html like the below,
<div id ="b1">
<div class = "test1" value = 100> </div>
</div>
I need the Value 100 to be displayed in the HTML inside the particular div.
I used the below JS code,
Var target = document.getElementById('b1');
var test = target.getElementsByClassName('test');
$(test).innerHTML = $(this).attr('value');
It didnt work.
Could someone please help?
Many thanks.
The value attribute isn't available on a <div>
Use .innerHTML to change the value of the div
HTML/Javascript change div content
Also, you can use getElementsByClassName on the document itself, no need to get the parent <div> first
Since you're only expecting 1 result, well need to select the first index of the nodelist returned by getElementsByClassName
Javascript: How to get only one element by class name?
var test = document.getElementsByClassName('test1')[0];
test.innerHTML = 100;
<div id="b1">
<div class="test1"></div>
</div>
var test= document.getElementById('b2');
test.innerHTML=test.getAttribute("value")
<div id ="b1">
<div class = "test1" id ="b2" value="100" > </div>
</div>
You have entered the wrong className, and you cannot use this because it refers to the parent object in this case (window object)
you also cannot add a data attribute to a div, you can use a special dataset attribute data-value:
<div id="b1">
<div class="test1" data-value="100"> </div>
</div>
var target = document.getElementById('b1');
var test = target.getElementsByClassName('test1')[0];
test.innerHTML = test.dataset.value;

extracting two text value from html elements with cheerio [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Using cheerio, $ is defined as cheerio object, I am trying to get two text (Current price and Original Price) from some elements which have only class no id defined in a html. Any clue how to achieve this ?
Here is the snippet of the html content which hold this two values,
<div class="buy-box__element">
<div class="clp-component-render">
<div class="clp-component-render">
<div class="ud-component--course-landing-page-udlite--price-text" ng-non-bindable="">
<div>
<div class="price-text--container--Ws-fP udlite-clp-price-text" data-purpose="price-text-container">
<div class="price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl" data-purpose="course-price-text"><span class="udlite-sr-only">Current price</span><span><span>₹700</span></span></div>
<div class="price-text--price-part--Tu6MH price-text--original-price--2e-F5 udlite-clp-list-price udlite-text-sm" data-purpose="original-price-container">
<div data-purpose="course-old-price-text"><span class="udlite-sr-only">Original Price</span><span><s><span>₹1,280</span></s></span></div>
</div>
<div class="price-text--price-part--Tu6MH udlite-clp-percent-discount udlite-text-sm" data-purpose="discount-percentage"><span class="udlite-sr-only">Discount</span><span>45% off</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
With X-path it is working,but I want to achieve this with cheerio. also tried with following
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")[0].innerText
#(".price-text--price-part--Tu6MH udlite-clp-discount-price udlite-heading-xl udlite-sr-only")
You can do something like:
$('span:contains("Current price") + span span').text()
Could you please try this?
the html should be the inner html, you can use puppeteer like libraries.Something like let html = await page.evaluate(() => document.body.innerHTML);
$('span:contains("Current price")', html).each(function() {
let CurrentPrice1 = $(this).next().text();
let CurrentPrice2 = Number(CurrentPrice1.replace(/[^0-9.-]+/g,""));
console.log(CurrentPrice1); //this with symbol
console.log(CurrentPrice2); //this for only fetching the numeric value
});
for Original price replace Current price with Original Price

Get querySelector All multiple conditions [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'd like to get all a Elements which got contain the classes menu-item-link and mk-image-link. Is the following expression right?
a[class*="menu-item-link"], a[class*="mk-image-link"]
Didn't get anything selected so I guess not :)
Thanks for the help.
Best regards,
Anton
You have to do this 'a.menu-item-link, a.mk-image-link' it will check if a has this class.
const selected = document.querySelectorAll('a.menu-item-link, a.mk-image-link')
const selected2 = document.querySelectorAll('a.menu-item-link.js-smooth-scroll, a.mk-image-link.js-smooth-scroll')
console.log(selected)
console.log(selected2)
<div class="menu-item-link"><div>
<div><div>
<a class="menu-item-link"></a>
<a class="mk-image-link"></a>
<a class="mk-image-link menu-item-link"></a>
<a class="menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <a href="...." target="_self" class="mk-image-link">
document.querySelectorAll allows grouping of selectors.
Note that, it would select all elements which has the specified class names, so a wild-card is not needed. i.e. if you are aiming at menu-item-link and mk-image-link the below should work for you.
So, you could try the below:
var elements = document.querySelectorAll("a[class~='menu-item-link'], a[class~='mk-image-link']"); // OR
elements = document.querySelectorAll("a.menu-item-link, a.mk-image-link"); // Would both selects the same
elements.forEach(function(element, index, array) {
element.style.backgroundColor = "#999";
});
<a class="js menu-item-link js-smooth-scroll" href="/superfood-rezepte/">SUPERFOOD REZEPTE</a> <br>
<a class="js menu-item-link js-smooth-scroll-a" href="/superfood-rezepte/">SUPERFOOD </a> <br>
<br>
Something
<br>
Another Something
<br>
Another Something

How can I find an elment in the parent of element [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have the following html code:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="function">delete</a>
</div>
how find image tag in the parent's of by pure java script
Javascript:
function clickFunc(e){
var tgt = e.target;
var parent = tgt.parentNode;
var img = parent.getElementsByTagName("img")[0];
parent.removeChild(img);
}
HTML:
<div class=imgHolder>
<img src="some address"/>
<a class="del" onClick="clickFunc">delete</a>
</div>
I tried to write it as self explanatory, but a walk through:
e is the click event.
e.target is what the user clicked on (Your anchor tag)
parent is the parent node of the anchor.
img is the first image in the parent node.
Remove img from parent.
<div class=imgHolder>
<img src="some address"/>
delete
</div>
Script:
function deleteThis(sender){
var childs = sender.parentNode.childNodes;
for (var i = 0; i < childs.length; i++){
if (childs[i].tagName === 'img')
alert(childs[i].src);
}
}
OR, if you're sure img will be always before link.
function deleteThis(sender){
if (sender.previousSibling.tagName === 'img')
alert(sender.previousSibling.src);
}

Adding text to html textarea [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<div class="main">
<textarea rows ="20" cols="80" name ="output_box" id ="output"></textarea>
</div>
What I want it to do is to add text to that area on a button click like so
<div class="classname" button type =onclick="myFunction()" >
Export
</div>
and this is what it calls
<script>
function myFunction()
{
var obj = document.getElementById("output").innerHTML;
var text = document.createTextNode("Test data");
obj.innerHTML = text;
}
</script>
But after much frustration I cannot figure it out.
Example with the changes below: http://jsfiddle.net/charlescarver/hZw6q/
Your JS should be closer to this:
var obj = document.getElementById("output");
var txt = "Test data";
obj.value = txt;
txt != text
As Matt Ball pointed out, "obj is a string," not an object.
You don't need document.createTextNode as you're using value instead of innerHtml
Your HTML should also be:
<div class="classname" type="button" onClick="myFunction()">
Export
</div>
And not:
<div class="classname" button type =onclick="myFunction()" >
Export
</div>

Categories