Develop Reference

How to store a newly created element to localStorage or Cookie with Javascript?

I am making an idle clicker game for fun, everything was going fine until I encountered a problem.
What I basically want to happen is when the image is clicked and the clickCounter element is over one, the new image element is created. No problem here, the main problem is saving the image. If the user refreshes the page, I want the created element to still be there. I have tried using outerHTML and following some other Stack Overflow forum questions but I could never get a proper solution to this certain problem. I have also tried localStorage and cookies but I believe I am using them wrong.
My code is below, my sololearn will be linked below, consisting of the full code to my project.
function oneHundThou() {
var countvar = document.getElementById("clickCounter")
if(document.getElementById("clickCounter").innerHTML > 1) {
alert("Achievement! 1 pat!")
var achievement1k = document.createElement("img");
// create a cookie so when the user refreshes the page, the achievement is shown again
document.cookie = "achievement1k=true";
achievement1k.src = "https://c.pxhere.com/images/f2/ec/a3fcfba7993c96fe881024fe21e7-1460589.jpg!d";
achievement1k.style.height = "1000px"
achievement1k.style.width = "1000px"
achievement1k.style.backgroundColor = "red"
document.body.appendChild(achievement1k);
oneHundThou = function(){}; // emptying my function after it is run once instead of using a standard switch statement
}
else {
return
}
}
oneHundThou();
I am aware that there is another post that is similar to this, however, my answer could not be answered on that post.
Full code is here: https://code.sololearn.com/Wwdw59oenFqB
Please help! Thank you. (:

Instead of storing the image, try storing the innerHTML, then create the image on document load:
function oneHundThou() {
countvar.innerHTML = localStorage.getItem('clickCount') ? localStorage.getItem('clickCount') : 0; //before if
//original code
localStorage.setItem('clickCount', countvar.innerHTML); //instead of doc.cookie
}
window.addEventListener('DOMContentLoaded', (event) => {
oneHundThou();
});
or, if you don't care that clickCounter may initialize to null, you can remove the ? : and just put
countvar.innerHTML = localStorage.getItem('clickCount');
Edit: shortened code with the countvar variable

Cannot get ExecuteScriptAsync() to work as expected

I'm trying to set a HTML input to read-only using ExecuteScriptAsync. I can make it work, but it's not an ideal scenario, so I'm wondering if anyone knows why it doesn't work the way I would expect it to.
I'm using Cef3, version 63.
I tried to see if it's a timing issue and doesn't appear to be.
I tried invalidating the view of the browser but that doesn't seem to help.
The code I currently have, which works:
public void SetReadOnly()
{
var script = #"
(function(){
var labelTags = document.getElementsByTagName('label');
var searchingText = 'Notification Initiator';
var found;
for (var i=0; i<labelTags.length; i++)
{
if(labelTags[i].textContent == searchingText)
{
found = labelTags[i]
break;
}
}
if(found)
{
found.innerHTML='Notification Initiator (Automatic)';
var input;
input = found.nextElementSibling;
if(input)
{
input.setAttribute('readonly', 'readonly');
}
}})()
";
_viewer.Browser.ExecuteScriptAsync(script);
_viewer.Browser.ExecuteScriptAsync(script);
}
now, if I remove
found.innerHTML='Notification Initiator (Automatic)';
the input is no longer shown as read-only. The HTML source of the loaded webpage does show it as read-only, but it seems like the frame doesn't get re-rendered once that property is set.
Another issue is that I'm executing the script twice. If I run it only once I don't get the desired result. I'm thinking this could be a problem with V8 Context that is required for the script to run. Apparently running the script will create the context, so that could be the reason why running it twice works.
I have been trying to figure this out for hours, haven't found anything that would explain this weird behaviour. Does anyone have a clue?
Thanks!

Why is this jQuery load()-command repeated?

I have gone through many stackoverflow posts and other websites to find a solution to this problem, but none of the solutions i could find either fit my problem or just straight up didn't work.
Im using javascript and jQuery (and some Java for background work) to build a page on a website. The page contains a table with data (the data is handled by Java) and i want to have that table refresh every 10 seconds. That works.
But now i also want to highlight all the cells that have changed values in them. For that, as you see in my code snippet, i just simply turn the background of those cells black. That works too.
My problem is that the color only changes for a split second before changing back to standard white. Using the console and playing around a bit i was able to find out that the table is actually reloaded twice, which to me must mean the load-command is executed twice.
window.setInterval(function () {
if (frozen == false) {
$('table').load(document.URL + ' table');
var elem = document.getElementById("freezebtn"); //This is a button generated by Java Code
elem.style.background = getRandomColor();
var tab = document.getElementsByTagName('table').item(1);
var l = tab.rows.length;
for (var i = 0; i<l; i++) {
var tr = tab.rows[i];
var cll = tr.cells[1];
var check = tr.cells[0];
if(check.innerText === "getAsk") {
var valAsk = cll.innerText;
var ask = Number(valAsk);
if (ask != loadPreviousAsk()) {
console.log("TELEFONMAST!");
cll.style.backgroundColor = "#000000";
}
}
//Do this for every other Updateable Cell
...
}
cachePreviousValues(someValues,thatINeed,To,BeCached);
}
My Question is, what is/could be causing the repeat of the load command (or why won't the cells stay black at all)?
Is there a better way of achieving what im trying to do?
Could my code sample be optimized in any other way?

$.fn.load() is async (by default). To handle any logic regarding loaded data, you can use the complete callback:
$('table').load(document.URL + ' table', function(){/* your logic regarding loaded data here*/);

How to display this JavaScript message in my webOS app?

I am writing a webOS app and I want the following code to present a "Good Morning!" message. What code do I need to put in my Main-scene.html file and what else do I need in the Main-assistant.js file to make this work?
Many thanks in advance.
MainAssistant.prototype.welcomeMessage = function(){
datetoday = new Date();
timenow = datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();
if (thehour > 18)
display = "Evening";
else
if (thehour > 12)
display = "Afternoon";
else
display = "Morning";
var greeting = ("Good " + display + "!");
document.write(greeting);
};
All the best
David

I don't know when the welcomeMessage method will be called, but if it's after the document has finished loading then it is closed. Calling document.write then will call document.open, which completely clears the document. Likely you have an element that the message should be written into, much better to use the load or DOMReady events (or whatever is available on WebOS).
Consider a much simpler form of the function and don't forget to declare variables to limit their scope to only what is necessary:
var tod = ['morning','morning','afternoon','evening'];
var now = new Date();
var greeting = 'Good ' + (tod[now.getHours()/6|0]) + '!';
If you want a library, try myLibrary. No, it's not my Library, it's your library when you use it. You can create a customised core and just the DOM ready part that is quite small and the code quality is excellent.

How to communicate between two NativeWindows in Air

How can I send messages to or manipulate the contents of a NativeWindow instance from the parent window that created it?
I have read several places that to communicate between NativeWindow instances in the same application you need to "maintain a LocalConnection or write a whole whack of JavaScript". As it happens, I have no issue with writing a whole whack of JavaScript, but there doesn't seem to be any documentation on how to do it. Does anyone know what to do?
Thanks for any help you can give me!

Answering my own question here. "A whole whack of JavaScript" can be summed up in one ridiculous line:
var myWindow = air.NativeApplication.nativeApplication.openedWindows[intWindowCount].stage.getChildAt(0).window
myWindow.document.getElementById('status').innerHTML = "success";
This assumes you are using NativeWindow and loading HTML into using HTMLLoader and you're only loading one child. intWindowCount represents the number of opened windows (including the Introspector). 0 represents the number of children you created using the stage.addChild() method. The code I'm using is below in its entirety. There is likely some cleaning up to do, but it should be a good starting point for anyone that needs to do the same thing:
var htmlView = new air.HTMLLoader();
htmlView.width = 300;
htmlView.height = 500;
var objWindowOptions = new air.NativeWindowInitOptions();
objWindowOptions.transparent = false;
objWindowOptions.systemChrome = air.NativeWindowSystemChrome.STANDARD;
objWindowOptions.type= air.NativeWindowType.NORMAL;
var wWindow = new air.NativeWindow(objWindowOptions);
wWindow.x = objScreen.x;
wWindow.y = objScreen.y;
wWindow.width = objScreen.width;
wWindow.height = objScreen.height;
wWindow.activate();
wWindow.stage.align = "TL";
wWindow.stage.displayState = runtime.flash.display.StageDisplayState.FULL_SCREEN_INTERACTIVE;
wWindow.stage.scaleMode = "noScale";
wWindow.stage.addChild( htmlView );
htmlView.load( new air.URLRequest("pageTwo.html") );
setTimeout(function(){
objScreen.setWindowReference(air.NativeApplication.nativeApplication.openedWindows[intWindowCount].stage.getChildAt(0).window);
objScreen.setClock(cClock);
cClock.screen = objScreen;
},500);
The timeout at the end is a horrible, embarrassing hack. I'm only using it because I haven't found the right event yet to use with addEventListener().