Develop Reference

On some devices, Javascript assigns new text nodes only after second selection

I wrote a simple website, which displays 1 of 150 Psalms at random with a random image from a small array of images. Once loaded user gets two choices, either read another Psalm at random (button "Any Psalm") or choose one themselves (select element). The function that loads a random Psalm works fine, but the select button, though works fine on local server and also on my laptop after pushing it to Github, but on my phone and iPad it works only if you select again, so say you're on Psalm 20, then you select Psalm 83 and then nothing happens, until you select again, say psalm 102, only then that it loads psalm 83, so you're always one step behind.
I suspect it may have nothing to do with the code, nonetheless, here's my function;
const selectPsalm = () => {
loadingImage();
let psalms = randomPsalm(psalmsBulk)[1];
let selectedPsalmIndex = document.getElementById("choose").value;
let lastIndex = () => {
if(psalms.indexOf(psalms[selectedPsalmIndex])<10) {
return 2
} else if(psalms.indexOf(psalms[selectedPsalmIndex])<100) {
return 3
} else return 4
}
strHeading = psalms[selectedPsalmIndex].slice(0, psalms[selectedPsalmIndex].indexOf(psalms.indexOf(psalms[selectedPsalmIndex]))+lastIndex());
strScripture = psalms[selectedPsalmIndex].slice(psalms[selectedPsalmIndex].indexOf(psalms.indexOf(psalms[selectedPsalmIndex]))+lastIndex());
document.getElementById('heading').innerHTML = strHeading;
document.getElementById('psalm').innerHTML = strScripture;
}```
and these are my event listeners:
//document.getElementById("random").addEventListener('click', newRandomPsalm);
//document.getElementById("choose").addEventListener('click', selectPsalm);
$('document').ready(function(){
$('#random').on('click', newRandomPsalm);
$('#choose').on('click', selectPsalm)
})
I commented out my original js event listeners and changed them for jQuery ones, because I am learning jQuery and wanted to see it in my code, but both sets of statements do exactly the same.
You can see it in action at:
https://psalms.live/
My question is; what is wrong and how to fix it?

it turns out that on('click') is not always suitable for select dropdown element. The correct syntax is on('change').

Creating a Loop that checks for instock items on a webpage using a javascript file

I have been trying to create a Javascript simple program that checks for words on a specific web page and I am just wanting it to check every 5 seconds or so if the words are there. I think I have the pieces of the puzzle but I just cant put it together. I am a beginner at best and don't understand why this code is not working.
This is what I have but the iteration after searching for the word and reloading the page to check again are not in sync and the page reloads once. It should be checking if word is there, if it is there then I am trying to get it to reload page and check again and loop again .... every 5 seconds. Current output with below code is "true" in an alert box twice then reload after 5 seconds once. And it's over.
Note:
x just stops from looping forever.
When it doesn't match any more it plays a song.
I saved this as a .js file and I am currently just testing the code within chrome dev tools.
'''
var x = 1;
function ol(){
do {
if (document.documentElement.outerHTML.search('8"},"availability_html":"<p class=\\\\"stock out-of-stock') != -1)
{
x=x+1;
alert("true");
window.setTimeout(function ol() {
window.location.reload(true);
}, 5000);
} else {
alert("NOT FOUND!");
var snd1 = new Audio("C:\Users\DL\Desktop\bot files\BattleMetal-320bit.mp3");
function beep1()
{alert()
snd1.play()
beep1()
}
}
}while(x<3 && document.documentElement.outerHTML.search('8"},"availability_html":"<p class=\\\\"stock out-of-stock') != -1);
}
ol();

In the while condition you are checking if x < 3. so after printing twice true you are explicitly stopping the loop.

How to prevent users from affecting number of button clicked times

I have a game written in JavaScript and what it basically does is start a ten seconds timer and register the number of times the user is able to click on a certain button, before the timer elapses.
How the code works:
When a user clicks on the button, an element gets added to an array, using push function, then a different function returns the length of the array as the number of times clicked.
The problem with this:
If a user opens up the dev tools and alters the number of times an element is added to the array per click, this will change the outcome of the result.
My Approach:
What I decided to do is to store the length before I ran the push function and also after I ran the push function, then compare their differences and if it's greater than 1, it means something is not right. This seemed to work in my head until I wrote it down in code and discovered that if the user pushed multiple times before I checked the differences then it would go unnoticed. Please big brained guys, help me.
My code:
$('body').on('click', '.btn.z', function () {
// start listening
startCountingClicks()
})
var timerStarted = false;
var tc = [];
function startCountingClicks () {
$('.btn.z').html('ClickZed');
$('.Score').html('Your Score: '+gettc()+" clicks");
if (timerStarted == false) {
startTimer(10, $('#time'));
}
// user does multiple push before this function: startCountingClicks is called
var previous_length = tc.length; // get length before push
tc.push(1);
var new_length = tc.length; // get length after push
if (new_length - previous_length !== 1) {
console.log("fraud"); // this is supposed to catch a thief!!!
}
console.log(new_length+" "+previous_length);
timerStarted = true;
}
function gettc (){
// get number of clicks
return tc.length ;
}
A code that totally breaks this:
$('button').click(function(){tc.push(1); tc.push(1)})
EDIT:
I do not wish to protect against dev tools, though I am not against that method if it works. I just wish to get a better way of counting my clicks, a way that can't be affected by writing code on the dev tools.

You can't really stop people from doing stuff on the client side. It is pointless trying to prevent that. The best thing you can do is make sure whatever is sent matches what you expect on the server side.

Why isn't my if statement executing correctly even though condition has been met?

This is an InDesign script to convert indd files into jpgs and then export and rename them into a folder on my desktop. It all works fine, but there is one part that I'm trying to do, which is only export the pages that do not have the Master Page "H-Advertising" applied. I've written an if statement that checks what master page has been applied to the current page of the current document and should ostensibly only export that page if it hasn't had "H-Advertising" applied as a master page. I know that the loop works if I add a different condition (such as if (3!=4)) and it is also able to alert the master page of each page, but it just seems to go ahead and add the page to the array of pages I want to export no matter what.
Main();
function Main() {
// Check to see whether any InDesign documents are open.
// If no documents are open, display an error message.
if (app.documents.length > 0) {
app.jpegExportPreferences.exportingSpread = false;
//makes sure there is a book open
if (app.books.length != 1)
alert("This only works when you have one (1) book open and the first file in that book open");
else
//loop through the book's stories
for (b = 0; b < app.books[0].bookContents.length; b++) {
// initialize pages variable
var pages = [];
// loop through the pages in the active document
for (i = 0; i < app.activeDocument.pages.length; i++) {
// initialize variable holding document name, and then rename as follows
var myDocumentName = app.books[0].bookContents[b].fullName;
c = app.open(app.books[0].bookContents[b].fullName);
myDocumentName = myDocumentName.name.replace("indd", "jpg");
myDocumentName = myDocumentName.replace("WN16", "WN16_");
// get value of the current page's applied master
if (app.activeDocument.pages[i].appliedMaster != null) {
var appliedMaster = app.activeDocument.pages[i].appliedMaster.name;
}
// if it's not an advertising page, get the page number and add it to an array containing page numbers to export
if (appliedMaster !== "H-ADVERTISING" && appliedMaster!= "[None]" && appliedMaster!= null) {
alert(appliedMaster);
pages.push(app.activeDocument.pages[i].name);
printpages = pages.join(",");
// set the pageString of pages to export as jpegs
app.jpegExportPreferences.pageString = printpages;
// export all the pages using the export page range page string
c.exportFile(ExportFormat.JPG, File(Folder.desktop + "/EDIT_Jpgs/" + myDocumentName));
}
}
};

Note: Property 'pageString" is valid when JPEG export range is not all. So - just to be sure - you may need to set app.jpegExportPreferences.jpegExportRange to 'ExportRangeOrAllPages.EXPORT_RANGE'
Note2: Consider that a book could be opened without opened docs OR an activeDocument could be from outside of app.books[0] ==> in this case your loop for (i = 0; i < app.activeDocument.pages.length; i++) possibly lead to wrong values, cause target doc is opened... inside this loop.
Jarek

Okay, the script is working now, after I updated to InDesign 2017. So, not really an answer, other than there must have been a bug in InDesign. The only thing I did tweak in the code was to add this
if (app.activeDocument.pages[i].appliedMaster !== null && app.activeDocument.pages[i].appliedMaster!== "H-ADVERTISING" && app.activeDocument.pages[i].appliedMaster!==null) {
appliedMaster = app.activeDocument.pages[i].appliedMaster.name;
}
earlier in the code which checked the actual value of the master page, instead of checking a variable that was assigned the value of the master page. This seemed to be the trick to checking to filter for any pages that had no master page applied (null or "[None]")

remember a variable's history

Let's say I have a page that slides right and left and loads new content using ajax. A variable gets set to leftslide or rightslide depending on the slide direction.
When you click the back button in the browser the html5 popstate event enables and loads the last page using ajax. Now using the variable I can determin what direction to slide in when the back button is pushed if (var direction == 'leftslide'){ direction = 'rightslide'} (to get a nice "back" effect).
But if you push the backbutton twice the slide will not always be correct sine it will just reverse the slide instead of looking at the slide of that paticular page.
So is there any way to save a variables history and get the order back using javascript?
thanks for reading and thinking about this :)

var history = [];
var position = 1;
function onSlide() {
history.push(currentPage);
};
function lastPage() {
return history.length && history[history.length - 2];
};
function currentPage() {
return history.length && history[history.length - 1];
};
function goBack() {
if (history.length) {
position += 1;
navigateTo(history[history.length - position]);
}
}
function goForward() {
if (history.length) {
position -= 1;
navigateTo(history[history.length - position]);
}
}
Get the idea?
Basically, we are saving each page we visit in an array. When we navigate through history, we keep track of our position in history by updating an integer variable that indicates which slot in the history array to check.

This might help: ajax history libraries. Never used ajax or javascript before

This sounds to me more like you want to save some state in a cookie which you can then read anytime the page is loaded. You can make a cookie scoped to the entire site, a branch of the site or just a path.