How to remove the unnecessary html after appending? - javascript

var split = $('.split-locations').text().split('\n');
for (var i = 0; i < split.length; i++) {
$('.split-locations').append("<pre>"+split[i]+"</pre>");
}
<div class="split-location">
Singapore
USA
Aussie
</div>
On profile, the user type with enter for each address, but the problem is when it is saved, the addresses would be displayed on the webpage as:
Singapore USA Aussie
<pre>Singapore</pre>
<pre>USA</pre>
<pre>Aussie</pre>
I am not sure why the text (Singapore USA Aussie) is still there. Only wanted to display:
<pre>Singapore</pre>
<pre>USA</pre>
<pre>Aussie</pre>
How to remove the first line before <pre> bunch? Or how to replace text with pre bunch?
Update
One more thing: how to print first array outside loop because need to display first one outside loop and then put the rest of array inside accordion?
Here the code is: for you to understand what I am trying to do. see the comment.
var location = $('.split-locations');
var split = $('.split-locations').text().split('\n');
location.empty();
//need to print first location
location.append('<div class="accordion-location">');
for (var i = 0; i < split.length; i++) {
//print remaining location after minus first location
location.append("<pre>"+split[i]+"</pre>");
}
location.append('</div>');
});

You need to empty the container element before appending the pre nodes. Try this.
var split = $('.split-locations').text().split('\n');
$('.split-locations').empty();
for (var i = 0; i < split.length; i++) {
$('.split-locations').append("<pre>"+split[i]+"</pre>");
}

You need to clear out the location:
var split = $('.split-locations').text().split('\n');
$('.split-locations').empty();
for (var i = 0; i < split.length; i++) {
$('.split-locations').append("<pre>"+split[i]+"</pre>");
}
Update:
var $el = $('<div class="accordion-location"></div>');
for (var i = 0; i < split.length; i++) {
$el.append("<pre>"+split[i]+"</pre>");
}
location.append($el);

Related

Create a sentence containing keywords with a specific CSS with JavaScript

I would like to form a sentence. However, in this sentence there are keywords that contain a specific CSS, according to a word dictionary contained in a JSON.
I don't know how to take into account the CSS of dictionary words and the rest of my sentence to display it correctly.
For example, I get a sentence with:
I have a problem with my network cable....
Problem being in my dictionary in a JSON file I want it to get a specific CSS. Problem should appear in red.
I can only display keywords. I don't see how to reconstruct my sentence.
for (let i = 0; i < features.length; i++) {
for (let j = 0; j < newDataLime.length; j++) {
if (features[i] === newDataLime[j].label) {
console.log(newDataLime[j].rgba);
spanCounter ++
// Max 12 span by each line for ver
if(spanCounter == 12){
spanCounter = 0;
}
fieldText.innerHTML = fieldText.innerHTML + `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
}
}
}
Features is a table that contains all the words in my sentence cut to each space. So it contains for our example ["I", "Have", "Problem" ... etc.]
And the variable newDataLime contains the keywords of the dictionary.
How can I correctly form my sentence?
I hope I have been clear enough. Thank you in advance!
You should try to replace the word in your sentence array, with the stylized word.
And then, when your array is fully computed, you'll be able to put it in any DOM element :
for (let i = 0; i < features.length; i++) {
for (let j = 0; j < newDataLime.length; j++) {
if (features[i] === newDataLime[j].label) {
console.log(newDataLime[j].rgba);
spanCounter++
// Max 12 span by each line for ver
if (spanCounter == 12) {
spanCounter = 0;
}
features[i] = `<span class="verbatim-dashboard__text__lime hide" style="background-color: ${newDataLime[j].rgba};">${features[i]}</span>`;
}
}
}
fieldText.innerHTML = features.join(" ");

Returning XML node values

I need to return all XML values from a URL.
I have previously used the URL and it works fine.
This is what I have so far:
function displayXML(xml) {
var devices = xml.getElementsByTagName("device");
for (var i = 0; i < devices.length; i++) {
var deviceDetails = devices[i].children;
for (j = 0; j < deviceDetails.length; j++) {
console.log(devices[i].childNodes[j].nodeValue);
}
}
}
It manages to return the right amount of values: 33 tags 33 values
but it's returning null for each one. However, the XML file contains values for each tag.
Thanks
Based on an answer to this question
The nodeValue property of XML elements is always null. The value of the element is actually stored within text nodes inside the element so you will need to go down one more child to get it. Try this
var devices = xml.getElementsByTagName("device")[i].firstChild.nodeValue;
I think your script should look something like this with firstChild inserted when trying to get the value:
function displayXML(xml) {
var devices = xml.getElementsByTagName("device");
for (var i = 0; i < devices.length; i++) {
var deviceDetails = devices[i].children;
for (j = 0; j < deviceDetails.length; j++) {
console.log(devices[i].childNodes[j].firstChild.nodeValue);
}
}
}

Google Script: Clear content of cells with specific background (to slow)

I am new to Google Script and i got stuck.
The code below works perfectly, but it takes more than 10 min to loop through all named ranges.
It clears the content of cells, but not the one with green backgrounds.
function deletNoGreenCells() {
var namedRange = ['HaM','BeM','LoM']
for (var k=0; k<namedRange.length; ++k) {
var range=SpreadsheetApp.getActiveSpreadsheet().getRangeByName(namedRange[k])
for( var i = 1; i < range.getNumRows()+1; ++i){
for(var j = 1; j<range.getNumColumns()+1;++j){
if (range.getCell(i, j).getBackground()!= "#93c47d") {
range.getCell(i, j).clearContent()
}}}}}
How can i get this faster?
Cheers!
Thank You Matthew for the link to call getBackgrounds, wich leeds me to this solution:
function deletNoGreenCells() {
var namedRange = ['HaM','BeM','LoM']
for (var k = 0; k < namedRange.length; ++k) {
var range =SpreadsheetApp.getActiveSpreadsheet().getRangeByName(namedRange[k])
var backgrounds = range.getBackgrounds();
for(var i = 0; i < range.getNumRows(); ++i) {
for(var j = 0; j<range.getNumColumns(); ++j) {
if (backgrounds[i][j] != "#93c47d") {
range.getCell(i+1, j+1).clearContent()
}
}
}
}
}
Now it runs only 5 seconds. Thanks!
I haven't tried this, but if you're just clearing the data from the non-green cells you might be able to do this:
Call getData on the range to get an array containing all the values
Call getBackgrounds on the range to get the corresponding array of background colours
Use the backgrounds array to update the data array, blanking out the elements you want to clear
Call setData on the range, passing back the modified array
It seems likely that reading and writing the data in big blocks like this will be quicker.

Greasemonky: How to return count and value of specific div class?

Lets say I have the following on a page:
<div class="data-container">John</div>
<div class="data-container">Dave</div>
<div class="data-container">Bob</div>
How can I use a javascript in greasemonkey to count each "data-container" class, extract the value (i.e. John) and display this info as a popup? like so:
1) John
2) Dave
3) Bob
Here is what I got so far that isn't working:
var elements = document.getElementsByClass("data-container");
for(var i=0;i<elements.length;i++){
document.body.innerHTML= document.body.innerHTML.replace(/<div class=\"data-container\">/g,"<p style=\"text-align: center;\"><span style=\"font-size:16px;\"><strong><span style=\"background-color:#ffff00;\">"+ elements[i].className + "</span></strong></span></p><div class=\"data-container\">");
}
Edit
Thanks cbwll! here is my current working code:
var elements = document.getElementsByClassName("data-container");
var contents = [];
var run = [];
for (var i = 0; i < elements.length; i++) {
contents += elements[i].textContent;
run += i;
final = run + contents;
}
alert(JSON.stringify(final));
it produces:
0123johndavebobevan
which is 0,1,2,3 & John, Dave, Bob, Evan
Any ideas on how the get them paired correctly then get a "\n" in there?
var elements = document.getElementsByClass("class");
var contents = [];
for (var i = 0; i < elements.length; i++) {
contents += elements[i].textContent;
}
//contents would be an array containing the names given in your example.

Looping through and updating the values in a select list

I'm trying to update the options of ALL select lists on a page and implemented a solution found on Get list of all `input` objects using JavaScript, without accessing a `form` object and other pages.
This works to an extent but only the select lists which occur AFTER the one which is triggering the javascript are updated whereas I need them ALL done, regardless of their position relative to the triggering select.
Here's a simplified version of what I have:
function chooseBon(id, value) {
var bonbonsAmount = 12;
var bonbonsCurrent = 0;
var bonbonsCount = 4;
var inputs, index;
// get all the select lists
inputs = document.getElementsByTagName('select');
// loop through all the lists
for (index = 0; index < inputs.length; ++index) {
// First disable all options
for (j = 0; j<=bonbonsAmount; ++j) {
inputs[index].options[j].disabled="disabled";
}
// Then re-enable the ones we still need
for (j = 0; j<=(bonbonsAmount - bonbonsCurrent); ++j) {
inputs[index].options[j].disabled="";
}
// add up the no of chocs selected so we know how many options to re-enabled above
bonbonsCurrent += inputs[index].selectedIndex;
}
I'm an admitted newbie and am adapting a script from one ecommerce platform for another so am hamstrung in certain areas so feel free to make other suggestions.
here is one of possible solutions and the fiddle:
function chooseBon() {
var bonbonsAmount = 12;
var bonbonsCurrent = 0;
var bonbonsRemaining; //max. is bonbonsAmount
var inputs, i, j;
inputs = document.getElementsByTagName('select');
for (i = 0; i < inputs.length; i++) {
bonbonsCurrent += parseInt(inputs[i].value, 10);
}
bonbonsRemaining = bonbonsAmount - bonbonsCurrent;
for (i = 0; i < inputs.length; i++) {
for (j = 0; j <= bonbonsAmount; j++) {
inputs[i].options[j].disabled = (j < bonbonsRemaining + parseInt(inputs[i].value, 10) + 1) ? false : true;
}
}
}

Categories

Resources