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;
Related
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
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I'm working on a grade holder project and I have an html class that holds one of the grades.
<span class="tooltip">
<span class="grade">83.49%</span>
</span>
I wanted to know how I could use JavaScript to turn the 83.49 into a 90.
I tried using the getElementsByClass but I wasn't actually sure of how to go about setting it up. All I need to do is change the specific grade.
if you have used grade class only at this place you can use this solution :-
document.getElementsByClassName("grade")[0].innerText = "90";
Use querySelector():
document.querySelector(".tooltip .grade").innerText = "90%";
<span class="tooltip">
<span class="grade">83.49%</span>
</span>
document.getElementsByClassName('grade')[0].innerText = '90%';
Note: getElementsByClassName returns array-like collection of elements.
Try with Math.ceil()(is round the number to higher value) .Use this (num/10)*10 formula to convert the number round of 10
First replace the % value form text.
Then parse the string to number using parseFloat()
Then apply above formula
var elem = document.querySelectorAll('.grade');
Array.from(elem,(a,b)=>{
var str = a.textContent.replace('%', '').trim();
a.textContent = Math.ceil(parseFloat(str) / 10) * 10+'%';
})
<span class="tooltip">
<span class="grade">83.49%</span>
<span class="grade">83.49%</span>
<span class="grade">43.49%</span>
</span>
You can also use separate ids for elements to call them by id as follows;
function cha()
{
ele=document.getElementById("grade");
ele.innerHTML="90%";
}
<span class="tooltip">
<span id="grade">83.49%</span>
</span>
<button onclick="cha()">Change</button>
Edit: If you still want to use classes then you can use 0th index of class array you got by using getElementsByClassName follows;
function cha()
{
ele=document.getElementsByClassName("grade");
ele[0].innerHTML="90%";
}
<span class="tooltip">
<span class="grade">83.49%</span>
</span>
<button onclick="cha()">Change</button>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need some help on editing elements which are in HTML with JavaScript. Is it possible to change the "text" with javascript? I've tried using document.getElementById but I don't think I'm doing it correctly.
Get the elemet with a query like you would use in css:
var element = document.querySelector('div.header');
Change the content using the textContent property:
element.textContent = "New Content;"
Adding image to content:
document.querySelector('div.header').innerHTML = "<img src='smiley.gif' alt='Smiley face' height='42' width='42'>";
Simple example with "press me" button that calls a function to change text
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
</html>
if querySelectorAll or getElementsbyClassName there are many ways to alter the text.
My answer is that you must think about your structure of the HTML Document.
You can use every ID only once. It is better to use data-lb="detail" etc. and classes for the div´s
Please see this not as an answer only as an tip.
You can try something like this -
<button id="click">
CLICK
</button>
<div class="header" id="textChange">Text</div>
And then in your JS -
$( "#click" ).click(function() {
$( "#textChange" ).replaceWith( "<h2>New heading</h2>" );
});
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 6 years ago.
Improve this question
I have text that contain HTML elements. For example like this
<div>
<div>content</div>
<div>
<div id="myId">
<p>
<span>content</span>
<span>content</span>
</p>
</div>
</id>
</div>
I want to get innerHTML of some element from this text using javascript like this example
// HTML variable contain above HTML text
var innerHTML = HTML.getElementById('myId').innerHTML;
Is it possible? Or other way like this way?
You could use a document fragment.
var HTML = "<div>\
<div>content</div>\
<div>\
<div id=\"myId\">\
<p>\
<span>content</span>\
<span>content</span>\
</p>\
</div>\
</div>\
</div>";
// create a fake document
var df = document.createDocumentFragment();
// create a placeholder node to hold the innerHTML
var el = document.createElement('body');
el.innerHTML = HTML;
// append to the document fragment
df.appendChild(el);
// execute .getElementById
console.log(df.getElementById('myId').innerHTML);
Create a new element based on your string as described in this question: Creating a new DOM element from an HTML string using built-in DOM methods or prototype.
After that you can operate on your new sub-tree with whatever DOM methods you want. You don't need to actually attach it to the page unless you want to use methods that would depend on actual rendering.
var HTML =
'<div>\
<div>content</div>\
<div>\
<div id="myId">\
<p>\
<span>content</span>\
<span>content</span>\
</p>\
</div>\
</id>\
</div>';
var elements = document.createElement('div');
elements.innerHTML = HTML;
var targetElement = elements.querySelectorAll("#myId");
console.log(targetElement)
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>