Develop Reference

How to run a function on click and url change JQuery

Right now I'm trying to use JQuery to set text at the end of a products name for a website. But the issue is right now it's set up to run when the document is ready.
So for some reason when switching pages it's not refreshing the page just adding to the url and changing products which is fine, but my code doesn't work for the other pages.
Example:
https://www.example.com/category
to
https://www.example.com/category/?sort=featured&page=2
I know that my code isn't as efficient as it could be, and there's reused code. But right now I'm just trying to get it to work before cleaning it up further. I couldn't really find anything online that really worked other than doing a location.reload() when the page nav was pressed. Unfortunately that ended up creating an infinite loop on the page.
I'm not sure if I'm just not thinking of the correct way to go about this or if my code isn't working as intended. I don't get any errors in the console either.
What I've tried:
Creating a selector for the page navigation so when clicked it will run the same code again.
Tried using a listener to listen for the clicks.
Tried checking if the url has changed.
Tried to refresh the page after clicking on page navigation along with using a timeout to wait for the page to change then refresh.
Code:
script1 - Handles adding text to product titles
$(document).ready(function() {
var multiTitle = $(".card-title");
var prodTitle = $(".productView-title");
var array = [list of titles];
if (multiTitle.length > 0) {
for (var i = 0; i < multiTitle.length; i++) {
for (var j = 0; j < array.length; j++) {
if (multiTitle[i].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
multiTitle[i].prepend(text);
}
}
}
}
if (prodTitle.length > 0) {
for (var j = 0; j < array.length; j++) {
if (prodTitle[0].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
prodTitle[0].append(text);
}
}
}
});
script2 - should re-add text after titles when pages change
$(".pagination-list").click(function() {
$(window).bind('hashchange', function() {
var multiTitle = $(".card-title");\
var prodTitle = $(".productView-title");
var array = [list of titles];
if (multiTitle.length > 0) {
for (var i = 0; i < multiTitle.length; i++) {
for (var j = 0; j < array.length; j++) {
if (multiTitle[i].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
multiTitle[i].prepend(text);
}
}
}
}
if (prodTitle.length > 0) {
for (var j = 0; j < array.length; j++) {
if (prodTitle[0].innerText == array[j]) {
var text = document.createElement('span');
text.innerHTML = "<span>text</span></br>";
prodTitle[0].append(text);
}
}
}
});
});

Forward to different users depending on labels - Gmail Apps Script

I am trying to create an Apps Script for Gmail, so that all messages labelled product-related and product-a are forwarded to the producta#gmail.com address, and all messages labelled "product-related" and product-b are forwarded to the productb#gmail.com address.
The script will be launched via a card, so there is no need for more automation.
Here's the code I did:
function testforward1() {
var label = "product-related";
//var interval = 2000;
//var date = new Date();
//var timeFrom = Math.floor(date.valueOf()/1000) - 60 * interval;
var threads = GmailApp.search('label:' + label);
for (var i = 0; i < threads.length; i++) {
if (label == "product-a" && "product-related") {
var recipient = 'producta#gmail.com';
var messages = threads[i].getMessages();
//var attachment = messages[i].getAttachments();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient, {
htmlBody: body
});
}
}
if (label == "product-b" && "product-related") {
var recipient1 = 'productb#gmail.com';
var messages1 = threads[i].getMessages();
//var attachment1 = messages1[i].getAttachments();
for (var j = 0; j < messages1.length; j++) {
var body1 = messages1[j].getBody();
messages1[j].forward(recipient1, {
htmlBody: body1
});
}
}
}
}
I guess I did something wrong with the variables, but I'm a total beginner with Google Apps Scripts, and I already spent more than 10 hours on this, with no success.
I got no email transferred with this, but the execution gives no error. And I was wondering if the var label = "product-related"; should be replaced with something else?
I will be grateful if you could give me some help on this!

I made it work (I think)! :)
function testforward1() {
var threadsa = GmailApp.search('label: product-related label: product-a');
for (var i = 0; i < threadsa.length; i++) {
var recipient = 'producta#gmail.com';
var messages = threadsa[i].getMessages();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient,{htmlBody: body});
}
}
var threadsb = GmailApp.search('label: product-related label: product-b');
for (var i = 0; i < threadsb.length; i++) {
var recipient = 'productb#gmail.com';
var messages = threadsb[i].getMessages();
for (var j = 0; j < messages.length; j++) {
var body = messages[j].getBody();
messages[j].forward(recipient,{htmlBody: body});
}
}
}
Now I still have a few more functions to implement, but the basic forwarding function works, and it's the most important.

changing all css selectors on page with js

im trying to use a dom event trigger using tag manager to run a script that will change all the on page elements with the same css selector
this is the JS loop im trying to run :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
</script>
any idea why its not working ?

so al i needed to fix this was to add a function call at the end like so :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
dissapper()
appear()
</script>
thank you #nulldev for pointing it out.

Hide a class of elements when any img clicked

I am trying to write a javascript for hidding all elements of the class "prewrap", when any image on
the webpage is clicked.
Code so far:
<script type="text/javascript">
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
</script>
Jsfiddle: http://jsfiddle.net/aX5kQ/
But this is not working at all, any idea what went wrong?

Your code is working, check this fiddle DEMO
EDIT
Remove the script tag from your jsfiddle leave only the code.
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.display === "none") {
elems[i].style.display = "block";
} else {
elems[i].style.display = "none";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre;
}
Also in your post this line should be corrected ->
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre; //this line - here should only be the name of the function without quotes and parentheses
}

It works just fine if you remove the script tag from the JS area of jsfiddle (you put raw javascript in there.. no tags)
edited demo at http://jsfiddle.net/aX5kQ/1/

Hi this code is executed immediately before the image is loaded and so no img is found.
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
Execute this when the DOM is finished loading with window.onload = ...

Javascript doesn't work when have another one

I searched but I didn't find the answer.
I have a code that change the color of my wordpress template blocks and posts randomly. Actually it changes the classes of these blocks and so the colors. You can see the code here:
function inArray(array , exist) {
var rslt = false;
for (var j = 0; j < array.length; j++)
{
if (array[j] == exist)
{
rslt = true;
}
}
return rslt;
}
var colored = Array();
function changeColor(target) {
var blocks = document.getElementsByClassName(target);
var blockLength = blocks.length;
for (var i = 0; i < blockLength; i++)
{
if (colored.length >= 9)
{
colored = [];
}
var rand = 0;
while (rand == 0 || inArray(colored , rand))
{
rand = Math.floor(Math.random()*10)%10;
}
colored.push(rand);
blocks[i].className = target+' color'+rand ;
}
}
window.onload = function() {
changeColor('block');
changeColor('post');
}
the code you seen placed in an external file named 'colors.js' and included by:
<script src="<?php bloginfo('template_url'); ?>/scripts/colors.js"></script>
in my wordpress template.
the code works correctly til I add another code like this:
<script>var _mxvtmw_position = 'left', _mxvtmw_domain = 'icomp.ir'</script>
<script src="http://iwfcdn.iranwebfestival.com/js/mx.vtmw.min.js?12688" async="async"></script>
Why? And how can i fix this problem?
Thank you.
EDIT:
DEMO: http://tuts.icomp.ir/

IN CASE blocks.length IS 1 YOU HAVE TO ADD ONE MORE IF CONDITION
if (blocks.length==undefined){
//code
}