Changing background of one post in a group of posts -JS - javascript

I have a page where at top a full post (Wordpress) is displayed and underneath the post is the full group of posts (title and excerpt) including the one displayed. I want to be able to change the background of the post below (title and excerpt) when it is the same post as the one displayed in full above.
Here's my code:
var title1 = document.querySelector(".subhead").innerText.toLowerCase();
var names = document.querySelectorAll('.case-names'),
result = [];
for (var i = 0; i < names.length; i++) {
result.push(names[i].textContent.trim().toLowerCase());
if (title1 == names[i]) {
document.querySelector(".case-bottom").style.backgroundColor = "red";
}
};
When I use console log, I see title1 = joe smith and that "joe smith" is contained in the names array. I don't get any errors but the background isn't changing.
Thanks in advance.

You'd need to put the text in an inline element, like a span, and then apply the background color to the span.
HTML markup:
<h1 class="case-bottom"><span>The Last Will and Testament of Eric Jones</span></h1>
JavaScript:
if (title1 == names[i]) {
document.querySelector(".case-bottom span").style.backgroundColor = "red";
}

I didn't test the code, and I had to guess what is your DOM structure. So my code might not match your need exactly, but it should be enough to show you what you should do. I suppose your HTML:
<div class="main-post"></div>
<div class="case-bottoms">
<div class="case-bottom>
<div class="case-name">Post Title</div>
<div class="case-excerpt">some text</div>
</div>
</div>
let cases = document.querySelectorAll('.case-bottom');
[...cases].forEach(case => {
let caseTitle = case.querySelector(".case-names").trim().toLowerCase();
if (caseTitle == title1) {
case.style.backgroundColor = "red";
// I always prefer this:
case.classList.add(".is-reading");
} else {
// and this:
case.classList.remove(".is-reading");
}
)

Related

Appending multiple templates to a DOM

Java Script
const cardDropdownTemplate = document.querySelector('[Card-Dropdown-Template]');
const cardDropdownContainer = document.querySelector('[card-dropdown-container]');
SearchBoxMainNav.addEventListener('input', async(event) =>{
var input = document.getElementById('SearchTerm').value;
const card = cardDropdownTemplate.content.cloneNode(true).children[0];
cardDropdownContainer.innerHTML = "";
if (input != "") {
var result = cardSearch(input);
console.log(result);
for (var i = 3; i > -1; i--) {
const name = card.querySelector("[Ygo-Card-Name]");
const desc = card.querySelector("[Ygo-Card-Desc]");
name.textContent = result[i].name;
desc.textContent = result[i].desc;
cardDropdownContainer.append(card);
}
console.log(card);
console.log(result);
}
})
Html
<div class="dropdown-Content" card-dropdown-container ></div>
<template Card-Dropdown-Template>
<div class="card-dropdown">
<div class="card-name" Ygo-Card-Name></div>
<div class="card-description" Ygo-Card-Desc></div>
</div>
</template>
So I have this code, when it executes it listens for an input then sends that input into my api searcher, it searches the api for the 4 most simmilar listings in name then Uses a dom template to create a box and puts all the information in it so i can make a Dropdown.
My problem is currently it is only creating one Box and is just overwriting the information in that one box instead of making multiple boxes. Am I just using append wrong or what? When i watch it in slow mo The data gets overwriitten even before the append is reached in the code, so maybe its just drawing the template in real time after the append and the append only makes a new box that first time then does nothing the rest of the times?

JS exstract part of URL from multiple form fields

I have a form that has multiple fields all with the same class. These are populated with URL's that follow the same structure. I am trying to extract the same section from each URL. So far var res = x.split('/')[5]; will achieve this but only for the first URL. I can also use var x = document.querySelectorAll(".example") to change all the url's but I cannot find the correct way to combine both of these function. so far my code looks like this:
script>
function myFunction() {
var x = document.querySelectorAll(".example").innerHTML;
var res = x.split('/')[5];
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML = res;
}
}
</script>
I have looked around but can't find a solution that fits. Thanks in advance for your help.
So loop over the HTML Collection, this is making assumptions based on code.
// Find all the elements
var elems = document.querySelectorAll(".example")
// loop over the collection
elems.forEach(function (elem) {
// reference the text of the element and split it
var txt = elem.innerHTML.split("/")[5]
// replace the text
elem.innerHTML = txt
})
<div class="example">1/2/3/4/5/a</div>
<div class="example">1/2/3/4/5/b</div>
<div class="example">1/2/3/4/5/c</div>
<div class="example">1/2/3/4/5/d</div>
<div class="example">1/2/3/4/5/e</div>
<div class="example">1/2/3/4/5/f</div>

Protractor - Clicking button in div which has a span with certain text

I have a problem with clicking a button in Protractor. Simplified code looks like that:
<div class = "container">
<div class = "col1">
<span class = "hour">12:00</span>
</div>
<div class="col2">
<button class="btn">Test</button>
</div>
</div>
<div class = "container">
<div class = "col1">
<span class = "hour">13:00</span>
</div>
<div class="col2">
<button class="btn">Test</button>
</div>
</div>
I would like to click a button in div, where its span has "12:00" hour. The condition must check the hour.
I can easily check the span with
by.xpath('//span[contains(text(), "12:15")]')
My main concern is to select the button with parent div having this span. Is this possible?
Thank you.
I had a similar condition. But I had just to extract a value from DOM and compare it with the expected result, it looks like this:
records = await targeting_page.records.getText();
recordsNumber = parseFloat(records.replace(/,/g, ''));
recordsRange = recordsNumber >= 100 && recordsNumber < 90000000;
await expect(recordsRange).toEqual(true);
but your occasion is not a big difference.
that what I have written in browser console on this page of your question
async function fin() {
for(var i = 0; i < 100; i++) {
var myElement = document.querySelector("code span:nth-child(27)").textContent //your find your desired element
console.log(b)
typeof b == 'string' ? console.log(true) : console.log(false) //this is optionally
var res = parseFloat(b) //parse when it will be 12:00 you will get the 12 number
console.log(res)
res == 13 ? await b.click() : console.log("The button is not ready yet") //and here compare is there that number you need, if yes then click element(this doesn't work in console,
// if you use async/await in your protractor tests, there are it will work
}
}
fin()
That's what concerns directly this page.
In test, it will be looking something like this(it can be much better but I drafted it very quckly):
for(let i=0; i < 100; i++) {
var myE = await myElement.getText(); //where myElement -- your selector
var myNumber = parseFloat(myE.replace(/:/g, '')); // parse and get 12 out of "12:00"
if (myNumber == 12) {
await myElement.click()
} else {
console.log("The button is not ready yet")
}
}
by.xpath('//span[contains(text(), "12:15")]/ancestor::div//button[#class='btn']')
Hope this answer helps you!!
0506

Group API results in one DIV

I'm having a really hard time trying to edit the JS code/API (Google Feeds) to make it work in a responsive design.
Right now the results of the API is as followed :
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
...
I want it to be like that :
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
<div class="gfg-group">
<div class="gfg-subtitle"></div>
<div class="gfg-list"></div>
</div>
I tried this (but don't get any result) :
$(document).ready(function(){ $("#contentfeed").append("<div class='gfg-grouped'></div>");
$(".gfg-grouped").text($(".gfg-subtitle").text() + " " +$(".gfg-list").text()); });
Tried this as well (doesn't seem to work either) :
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-group';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
See http://jsfiddle.net/pnwm67q8/2/ :
Thanks to the previous replies, I went on and solved it myself (took me way too long but that's how we all learn right? :) Leaving the solution here if that can help someone.
I added the following lines :
var newGroup = this.createDiv_('gfg-grouped');
and
if (!this.options.horizontal && this.options.stacked) {
var newGroup = this.createDiv_('gfg-grouped');
var newTitle = this.createDiv_('gfg-subtitle');
nodes.root.appendChild(newGroup);
newGroup.appendChild(newTitle);
this.setTitle_(this.results[0].feed, newTitle);
and
newGroup.appendChild(nodes.list);
See : http://jsfiddle.net/m5krqvbz/3/
There's a lot of logic going and I'm not familiar with the API on but you can group the entries like so:
// group the Title and List
var groupDiv = document.createElement('div');
groupDiv.className = 'gfg-grouped';
groupDiv.appendChild(newTitle);
groupDiv.appendChild(newList);
You would get something like the following:
$intendedContainer = $("");
$(".gfg-subtitle").each(function(){
var $list = $(this).next().detach();
var $subitle = $(this).detach();
var $groupItem = $("<div class='gfg-group'></div>");
$groupItem.append($list).append($subtitle);
$groupItem.insertBefore($subTitle);
$intendedContainer.append($groupItem);
});
I didn't work through your entire code as it's quite huge, but this is the kind of logic you will need to implement.

jQuery .prepend JSON results to multiple div's

So I am looping through some JSON and prepending latest results to some HTML on another page. Everything works perfectly code wise, except I am currently prepending everything to one div, where I would like to prepend particular items to particular divs. See below. I would like to echo the name in the name div, content in content div and the id in the message div, for example.
Thanks so much in advance!
My HTML is as follows:
<div id="activityspot">
<div class="entry template">
<div class="message"></div>
<div class="name"></div>
<div class="content"></div>
</div>
</div>
The jQuery is as follows:
$.get(url, function(data) {
jsonData = $.parseJSON(data);
var spot = $("#activityspot");
var template = spot.find(".template");
for (var j = 0; j < jsonData.items.length; j++)
{
var entryData = jsonData.items[j];
var entry = template.clone();
entry.removeClass("template");
//I guess I need to select the other div's in here?
entry.find(".message").text(entryData.statusid + entryData.name + entryData.content);
spot.prepend(entry);
}
What I end up with is something that looks like this:
<div class="message">53671 (id) Billy Zane (name) I like Billy (message) </div>
Try:
entry.find(".message").text(entryData.statusid);
entry.find(".name").text(entryData.name);
entry.find(".content").text(entryData.content);

Categories