function will not call another function, javascript - javascript

For a class project i am trying to count the number of clicks a button gets, save the search term, and then open a new html file. my problem is that the "doCoolThings" function will not call the "newWindow" function. I cannot figure out how to get the newWindow function to execute after i click submit.
here is my code:
window.onload = init;
function init() {
var myButton = document.getElementById("submitButton");
myButton.onclick = doCoolThings;
}
function doCoolThings(){
alert("test count");
localStorage.searchTerms = document.getElementById("searchWord").value;
//var searchOutput = document.getElementById("searchOutput");
searchWord.innerHTML = searchTerms;
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
//window.open("scroogleresults.html");
}
else
{
localStorage.clickcount=1;
//window.location="scroogleresults.html";
}
var myCounter = document.getElementById("numberClicks");
var counter = localStorage.clickcount;
myCounter.innerHTML = counter;
newWindow();
}
function newWindow(){
alert("new window");
window.open("scroogleresults.html");
}

If this is the extent of your code, it looks to me like you have some javascript errors. You should be checking the error console or debug console in your browser for javascript errors that cause your scripts to abort. Here are a couple errors I see:
Error #1
In doCoolThings(), when you do this:
searchWord.innerHTML = searchTerms;
I don't see any place that searchTerms is defined so this would generate a script error.
Error #2
You should be using getItem() and setItem() to access localStorage.

Related

Google Tag Manager Custom Variable return Undefined

I'm working with Google Tag Manager using a Custom JS Variable to store data about user's privacy consent.
I tried the function below with a variable for privacy that is set to true only if the user clicks on a specific button.
function controlloConsenso() {
var privacyAccettata = false;
var checkPrivacy = document.querySelector(".ginger_btn_accept_all");
checkPrivacy.addEventListener("click", function() {
privacyAccettata = true;
});
return privacyAccettata;
}
The problem is that the variable result is undefined within the GTM Debugger.
When trying the script outside the first function (that GTM doesn't accept) the code works fine (I've tested it in Chrome Console).
var privacyAccettata = false;
var checkPrivacy = document.querySelector(".ginger_btn_accept_all");
checkPrivacy.addEventListener("click", function() {
privacyAccettata = true;
});
Omit the name from your function and it should work. That is, change your custom JavaScript tag to:
// function controlloConsenso() {
function(){
var privacyAccettata = false;
var checkPrivacy = document.querySelector(".ginger_btn_accept_all");
checkPrivacy.addEventListener("click", function() {
privacyAccettata = true;
});
return privacyAccettata;
}

Navigate to webpages and click button

Using a simple javascript snippet on google chrome, I am attempting to navigate to various webpages and downloading select files from them.
Here is my code so far..
var thumbnails= document.getElementsByClassName('mythumbnails')
var arr=Array.prototype.slice.call(thumbnails)
timeToCloseWindow=10000;
function work() {
if(thumbnails.length==0) return;
var url = arr.shift();
var openWindow = window.open(url.href);
setTimeout(function () {
document.getElementsByClassName("download-icon")[0].click()
openWindow.close();
work();
}, timeToCloseWindow);
}
work()
Unfortunately, I run into the error Cannot read property 'click' of undefined. I have also tried using a for loop with a sleep condition with the same error. Any idea what I am doing wrong?
window.location = url.href;
document.getElementsByClassName("download-icon")[0].click()

How to set value of child pop op elements from parent window using Javascript?

I am calling a pop up window from a parent page using :
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
I then try to set the value of two spans which are on chil pop up from parent window using this childWindow object.
childWindow.onload = function () {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
};
this code works fine as long as I am using chrome. But it refuses to work on IE8. There are no console errors either.
I tried removing childWindow.onload = function () { } but then the page would just sort of refresh on both chrome and IE8.
UPDATE
This did not work either.
function CallPopUp(rowindex,controlname ) {
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
If test.aspx is in the browser cache, it is possible that the onload event has already happened before you attach your event handler so you're missing it (IE is known to do this with image load events). I'd suggest you check document.readyState before attaching your event handler.
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
As another option, you can put the values into the query parameters for the URL:
`"test1.aspx?hidden1=" + rowindex + "&hidden2=" + controlname`
and then have the popup window load it's own fields from it's own onload handler from what's in the query string. Then, you can keep the code in the popup window self contained and you don't have to try to modify one window from another.
If you don't want the user to see this or be able to edit it, you can turn off the location bar in the popup window.

Phonegap onDeviceOnline

I am using the folowing script to check if device is online or offline:
function checkConnection() {
document.addEventListener("online", onDeviceOnline, false);
document.addEventListener("offline",onDeviceOffline, false);
function onDeviceOnline(){
loadZive();
loadMobil();
loadAuto();
};
function onDeviceOffline(){
alert("deviceIsOffline");
};
};
checkConnection();
Then I have this function to load feed:
function loadZive(publishedDateConverted){
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.zive.sk/rss/sc-47/default.aspx");
feed.setNumEntries(window.localStorage.getItem("entriesNumber"));
feed.load(function(result) {
if (!result.error) {
var feedlist = document.getElementById("feedZive");
for (var i = 0; i < result.feed.entries.length; i++) {
var li = document.createElement("li");
var entry = result.feed.entries[i];
var A = document.createElement("A");
var descriptionSettings = window.localStorage.getItem("descriptionSettings");
if (descriptionSettings=="true"){
var h3 = document.createElement("h3");
var p = document.createElement("p");
var pDate = document.createElement("p");
pDate.setAttribute("style","text-align: right; margin-top: 5px;");
var publishedDate = new Date(entry.publishedDate);
publishedDateConverted = convertTime(publishedDate);
pDate.appendChild(document.createTextNode(publishedDateConverted));
h3.setAttribute("style","white-space: normal;")
h3.appendChild(document.createTextNode(entry.title));
p.setAttribute("style","white-space: normal;")
p.appendChild(document.createTextNode(entry.content));
A.setAttribute("href",entry.link);
A.appendChild(h3);
A.appendChild(p);
A.appendChild(pDate);
}
else{
A.setAttribute("href",entry.link);
A.setAttribute("style","white-space: normal;")
A.appendChild(document.createTextNode(entry.title));
};
li.appendChild(A);
feedlist.appendChild(li);
}
$("#feedZive").listview("refresh");
}
});
}
google.setOnLoadCallback(initialize);
};
First I load second script, then first. But I cant see anything. If I turn my app on then I see page layout for abou 1 sec then (probably after loading first script) function onDeviceOnline() happens and I can see only blank page. But it should load feeds into existing template.
IMHO onDeviceOnline function happens after loading the page template and therefore it cant import feeds. If I create function like this:
function loadFeeds(){
loadZive();
loadMobil();
loadAuto();
};
then everything works fine so I think it has something to do with online and offline eventlisteners. It also didnt work when I put checkconnection into onDeviceReady function so it should not be the problem. So is there any way to check if device is online and if it is then use js file to load feeds?
EDIT: I have used Simon McDonald suggestion and created code like this:
function onDeviceReady(){
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(){
navigator.app.exitApp();
}
function checkConnection() {
var networkState = navigator.network.connection.type;
if (networkState == "none"){
alert("no network connection");
}
else{
loadZive();
loadMobil();
loadAuto();
};
};
checkConnection();
};
With this code alerts are working perfectly for device online and device offline but when I try to loadFeed I get the same result as before (page layout loads and then everything changes to blank page).
The problem is that you are adding a "online" event listener in device ready event listener but the device is already on line so the event will not fire again until there is a change in connectivity. In your device ready event listener you should check the value of navigator.connection.network.type and make sure it isn't NONE.
http://docs.phonegap.com/en/2.0.0/cordova_connection_connection.md.html#connection.type

javascript access web-based script on button click

How would I go about accessing a web-based script. I don't know if I'm wording that correctly. I just want to be able to click a button and run the function. That's not the issue. The issue is how do I go about putting it in a function.
<script type="text/javascript" src="http://wwww.blah.com/blah?blah=blah"></script>
how would i get that to run on button click? I've tried every which way to put it in a function and call the function. No luck though.
var buildScript = function (url, optionalCallback) {
var script = document.createElement("script"),
parent = document.getElementsByTagName("script")[0].parentElement;
script.onload = optionalCallback;
script.src = url;
parent.appendChild(script);
};
var button = document.getElementById("my-button");
button.onclick = function () { buildScript("//url.to.site/file.js"); };
Or optionally:
button.onclick = function () {
buildScript("//url.to.site/file.js", function () {
function_from_loaded_script();
});
};
If you need it to do other stuff, you might need to be more specific.

Categories