In chrome extension,how to manipulate original html content
index.html
<div class='demo'>
<SPAN class ="number">1</SPAN>
<SPAN class ="number">2</SPAN>
<SPAN class ="number">3</SPAN>
<SPAN class ="number">4</SPAN>
</div>
content.js
//some logic to get arrays of text in "number" class from html,then multiply with 2 , then update the index.html
required output (index.html)
<div class='demo'>
<SPAN class ="number">2</SPAN>
<SPAN class ="number">4</SPAN>
<SPAN class ="number">6</SPAN>
<SPAN class ="number">8</SPAN>
</div>
hope this help you
index.html
<div class='demo'>
<span class ="number">1</span>
<span class ="number">2</span>
<span class ="number">3</span>
<span class ="number">4</span>
</div>
<button>d</button>
content.js
$("button").click(function(){
x=document.getElementsByClassName("number"); // Find the elements
for(var i = 0; i < x.length; i++){
var y = parseInt(x[i].innerText) * 2;
x[i].innerText= y; // Change the content
}
});
This will give you desired output,
Try this simple jquery code.
var c = 2;
$(".demo .number").each(function(){
$(this).html(c);
c += 2;
});
Related
I have tried using basic JavaScript when data-reviews="2" and it worked, but what I need is when data-reviews is less than 5 or any specific number, the whole <span> section should be hidden. I need assistance on this. I am trying to achieve the same outcome but I want to hide this, when data reviews has < 5.
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
Loop over the badge elements. For each collection badge select the review element. Parse the data-reviews attribute with parseInt. Check if the review is less than 5. If so, remove the collection badge element.
const collectionListBadges = document.querySelectorAll('.collection-list-badge');
for (const collectionListBadge of collectionListBadges) {
const reviewsElement = collectionListBadge.querySelector('[data-reviews]');
const amountOfReviews = parseInt(reviewsElement.getAttribute('data-reviews'));
if (amountOfReviews < 5) {
collectionListBadge.remove();
}
}
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="5.0" data-lang="en" aria-label="Rated 5.0 out 42reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="42" data-rating="5.0" data-label="reviews" aria-label="42 reviews" data-version="2">42</span>
</div>
<div class="collection-list-badge">
<span class="stamped-product-reviews-badge" data-id="5649263493270" style="display:block;">
<span class="stamped-badge" data-rating="4.0" data-lang="en" aria-label="Rated 4.0 out 38reviews"></span>
</span>
<span class="stamped-badge-caption" data-reviews="4" data-rating="4.0" data-label="reviews" aria-label="38 reviews" data-version="2">4</span>
</div>
My code like this since I using jquery tree
<ul class="tree">
<li>
<div class="tree-node" node-id="102009002002000000000000" style="cursor: pointer;">
<span class="tree-hit tree-expanded"></span>
<span class="tree-icon tree-folder tree-folder-open"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">TEXT-1</span>
</div>
</li>
<li>
<div class="tree-node" node-id="102009002002001000000000" style="cursor: pointer;">
<span class="tree-indent"></span>
<span class="tree-hit tree-expanded"></span>
<span class="tree-icon tree-folder tree-folder-open"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">TEXT-2</span>
</div>
<ul style="display: block;">
<li>
<div class="tree-node" node-id="102009002002001001000000" style="cursor: pointer;">
<span class="tree-indent"></span>
<span class="tree-indent"></span>
<span class="tree-hit tree-collapsed"></span>
<span class="tree-icon tree-folder"></span>
<span class="tree-checkbox tree-checkbox1"></span>
<span class="tree-title">CHILD TEXT-2</span>
</div>
</li>
</ul>
</li>
</ul>
Check the class if have tree-checkbox1 = checked, if checked get the node-id parent.
I have tried 2 option.
1 select parent then check if have child tree-checkbox1 if checked then get the node-id
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-node');
for (var i = 0; i < doc.length; i++) {
for (var x = 0; x < doc[i].length; x++) {
if (doc[i].childNodes[x].className == 'tree-checkbox1') {
kd_org.push(doc[i].getAttribute['node-id']);
}
}
}
second option select all class tree-checkbox1 then get the attribute parent
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-checkbox1');
for (var i = 0; i < doc.length; i++) {
var value = doc.parentNode.getAttribute['node-id'];
kd_org.push(value);
}
Still no luck :(, i not expert on javascript any help?
Your code has minor changes, below given is the working code that gets the node id
var kd_org = []; //for store data
var doc = document.getElementsByClassName('tree-checkbox1');
for (var i = 0; i < doc.length; i++) {
var value = doc[i].parentNode.getAttribute('node-id');
kd_org.push(value);
}
console.log(kd_org);
Couple of points to note
use indexer when you are accessing from the array doc[i]
use the method name with parenthesis instead of square brackets
Not sure what tree-checkbox1 = checked means, but if I understand correctly you are checking if the element has tree-checkbox1 class.
With jquery you can do this to select all the elements with this class, and get the node-id attr from parent
$('.tree-checkbox1').each((index, element) => {
console.log($(element).parent().attr('node-id'));
});
I've just about tried this every possible way, I'm super new at this.
I'm trying to get the element using class name, and then I'm trying to change it's value to true so that I can run a function I made that uses .push and an if/else statement to build a new array based off of the values in the spans (I'll post that function at the bottom)
Any help anyone can provide would be awesome, I've been at this for the last 3 evenings and I'm just stuck and I have to have this solved by tomorrow.. :(
A billion thanks in advance!
JavaScript
// Function Declaration to check the user's character choice.
function userChoiceCheck(uChoice, low) {
for (var j = 0; j < low.length; j++) {
if (uChoice == low[j]) {
var element = document.getElementsByClassName(low[j]);
element.setAttribute = "true";
console.log(element);
console.log("The value of " + low[j] + " should now be true!");
} else {
document.getElementsByClassName(low[j].class).value = "false";
console.log("The value of " + low[j] + " should now be false!");
}
}
}
HTML
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
function mentioned above:
// Function Declaration to merge censoredWord Array and upper Array into a
new array called displayArr. Depending on the boolean value of the span that
contains the character.
function mergeArr(low, up, wSplit, cWord) {
for (var m = 0; m < wSplit.length; m++) {
var targetCharSpan = document.getElementsByClassName(low[m]);
var charSpanVal = targetCharSpan.value;
if (charSpanVal == true) {
displayArr.push(up[m]);
} else if (charSpanVal == false) {
displayArr.push(cWord[m]);
}
}
}
I assume that you are having trouble on get all element by class,
if so, you need a loop
getElementsByClassName return a array HTMCollection, instead of using element.setAttribute, you should loop through every element inside your element variable
Like this:
for(let i=0;i<element.length;i++)
{
element[i].setAttribute = "true";
}
You can solve your problem this way using jQuery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="text-center pt-5">
<h1 id="wordGuessArea">
<span class="m" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="o" value="false">__ </span>
<span class="s" value="false">__ </span>
<span class="e" value="false">__ </span>
</h1>
</div>
<script>
for(var i=0;i<$('#wordGuessArea span').length;i++){
//Applying for all span elements inside wordGuessArea id
$('#wordGuessArea span').html('Bla');
}
</script>
</body>
Please help me to understand this. I have HTML code like this:
<div id="one">
<div>
<div>
<span class="spanone"></span>
<span class="spantwo"></span>
<div>
</div>
</div>
.
.(some other html of the page)
.
<sometag class="spanone"></sometag>
<someothertag class="spantwo"></someothertag>
And I basically want to target only the first <span> and the second by JS without touching the sometags elements. In other words the: <span class="spanone"> and <span class="spantwo">. And then I want to use innerHTML to replace the code with the one I want.
Thanks!
var spanone = document.querySelector('.span1');
var spantwo = document.querySelecftor('.span2');
spanone.innerHTML = "Replacement";
spantwo.innerHTML = "Replacement";
You can achieve this in a couple ways
Use id
<span class="spanone" id="myspan1"></span>
<span class="spantwo" id="myspan2"></span>
so in vanilla JS
var d = document;
d.getElementById('myspan1');
d.getElementById('myspan2');
or with classes
<span class="spanone myspans"></span>
<span class="spantwo myspans"></span>
and in your JS
d.querySelectorAll('.myspans')
This should work:
var spanone = document.querySelector('.spanone')[0];
var spantwo = document.querySelecftor('.spantwo')[0];
This is my page source :
<body>
<div>
<p><span id="1">word</span> <span id="2">word</span> </p>
<div><span id="3">word</span> <span id="4">word</span></div>
<ul>
<li><span id="5">word</span> <span id="6">word</span></li>
</ul>
</ul>
<p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>
I want to highlight(apply a new class) user selected spans and get it id's.
I can get user selected content through window.getSelection().But i don't know how to get selected text nodes.
Thanks in advance,
Logan
The window.getSelection() returns a selection object (ref) that includes the start (anchorNode) and end (extentNode). So based on the HTML you provided - with the ID's modified to not using only numbers (ref) - here is a demo. Click on any word, or select a group of words to see them get the "red" class name.
Modified HTML
<div>
<p><span id="s1">word1</span> <span id="s2">word2</span> </p>
<div><span id="s3">word3</span> <span id="s4">word4</span></div>
<ul>
<li><span id="s5">word5</span> <span id="s6">word6</span></li>
</ul>
<p><span id="s7">word7</span> <span id="s8">word8</span> <strong><span id="s9">word9</span></strong> </p>
</div>
Script
$('div').bind('mouseup', function(){
var i,
s = window.getSelection(),
// get ID of starting node
start = parseInt((s.anchorNode.parentNode.id || '').substring(1), 10),
// get ID of end node
end = parseInt((s.extentNode.parentNode.id || '').substring(1), 10),
// start gathering spans
spans = $('#s' + start);
// remove selected class
$('span[id^=s]').removeClass('red');
// add each span
for (i = start; i <= end; i++) {
spans = spans.add( $('#s' + i) );
}
// add selected class
spans.addClass('red');
});