I am new to the web development. I have a code that's supposed to change images when clicked on the image, and change the image back when released. And also it counts how many times it is clicked. I was building and testing this code on Safari and I didn't had any problems. It works just as expected on Safari. However it does not work on Chrome and IE (I haven't tested any other browsers).
I was normally working with HTML5 Boilerplate however I reduced the code so that I can show here (This version doesn't work too).
I have given the code of the page below. What should I do to make it work on every browser. What is the reason that it acts differently on browsers?
Thanks in advance
<!html>
<html>
<head>
<title></title>
<script type="text/javascript">
var count = 0;
function incrementCount()
{
count++;
document.getElementById( "count").innerHTML = count;
}
function pushTheButton()
{
document.images("bigRedButton").src = "img/pressed.gif";
return true;
}
function releaseTheButton()
{
document.images("bigRedButton").src = "img/unpressed.gif";
return true;
}
</script>
</head>
<body>
<div role="main">
<p>
<img src = "img/unpressed.gif" name="bigRedButton" onmousedown="pushTheButton()" onmouseup="releaseTheButton()" onclick="incrementCount()"/>
</br>
Click Count:<p id="count">0</p>
</p>
</div>
</body>
</html>
When testing in Chrome, remember to use its JavaScript console to watch for errors. In this case, it returns the following:
Uncaught TypeError: Property 'images' of object # is not a function
Your problem is on lines 18 and 24, when you attempt to access document.images("bigRedButton") -- document.images is an array (or possibly an object), not a function. It should be:
document.images["bigRedButton"].src
I don't know why it worked on Safari.
http://www.w3schools.com/jsref/coll_doc_images.asp
document.images is documented a integer-indexed array of images.
To be really sure, you should use:
document.images[0].src = ...
Although accessing the image by using the name works in many cases as well.
Related
With the update of Chrome from 43 to 44, the following syntax no longer works:
window.location.href = "javascript:alert()"
I'm trying to load the contents of a page from local storage. I'm doing this by returning the page contents as the result of a javascript function call. I need to specify a URL as the target for window. Rather than specifying http://...., I used to be able to specify javascript as the scheme in the URL and specify the name of the function to invoke.
Apparently, Google took this feature away in version 44. Has anyone run into this and figured out an alternative?
For others finding this page, it's an official bug now
The syntax is working for page itself, but not working for an iframe. This used to work in versions prior to Chrome 44. Even in Chrome 44, document is built and all events are fired, but the page won't be visible in iframe. The frame will start showing the contents if style attribute position for iframe is removed and added again. Here is the sample code illustrating workaround for Chrome 44.
chrome44.html
<html>
<script>
function getFrame(theFrameID)
{
return document.getElementById(theFrameID);
}
function loadFrameSource()
{
var aFrame = getFrame("frm");
aFrame.src = "chrome44frame.html";
// had to add the following line as a workaround for Chrome 44
aFrame.style.position = "absolute";
}
</script>
<body onload="loadFrameSource()">
<iframe id="frm" style="position : absolute;">
</body>
</html>
chrome44frame.html
<html>
<script>
function getHtml()
{
// Hard coding frame content for illustrating here, but actual script does more
return "<html> <body onload=\"document.getElementById('evnt').innerText='onload event fired.';\">href is Successful in changing html. <div id='evnt'>, but onload event didn't fire.</div></body> </html>";
}
function loadPage()
{
document.location.href="javascript:getHtml('href')";
// Had to add the following line as a workaround for Chrome 44
window.parent.getFrame("frm").style.position = "";
}
loadPage();
</script>
</html>
In firefox 19 and firebug 1.X I encountered a strange bug when trying //#sourceurl.
Basically I'm dynamically adding script tag through dom manipulation as you can see in the sample below. This does not work.
Maybe it's a limitation of ff but I find it odd that it works in chrome and not in ff.
Can you confirm this and do you have any bypass to this bug?
Ps: I don't want to use global eval() as it crash in ie when using document.write
<html>
<head>
<script type="text/javascript">
var count=0;
function addNewScriptToHead()
{
var newScriptElem;
var newScriptText;
newScriptElem = document.createElement('script');
newScriptElem.setAttribute('type', 'text/javascript');
newScriptElem.setAttribute('id', '' + count);
newScriptElem.text= 'console.log("Yay !");//# sourceURL=root/test'+count++ +'.js';
document.body.appendChild(newScriptElem);
};
</script>
</head>
<body>
<button onclick="addNewScriptToHead()">add script</button><br><br>
</body>
</html>
Experimentation has lead me to believe the following:
As of version 20.0, FF still does not support //# sourceURL directly in its inbuilt web console.
//# sourceURL does work with the Firebug addon in FF, but not completely as expected/hoped.
A. It only works for eval. It doesn't work at all for appended
script nodes like in the original question.
B. Errors will have a line number and the URL, and you can click
the error to see the line of code. However, console.log does not
seem to be affected and shows no line number or URL.
Testing this feature from within FF's web console is not advised. I got different results than testing directly in HTML at least some of the time.
I am trying to move a DOM node from the "root" page to a new pop-up that is created via window.open(). Here is the code I am using.
var win = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
win.document.close();
setTimeout(function () {
var el = win.document.createElement("table");
el.innerHTML = table.html();
win.document.body.appendChild(el);
}, 40);
It works in Chrome, but in IE8, I receive the following error: "Unknown runtime error."
I've also tried it this way:
var p = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
setTimeout(function () {
p.document.body.appendChild(table.clone(false)[0]);
}, 100);
Doing it this way, I receive "No such interface supported" in IE8. Again, Chrome works fine.
Does anyone have a way to do what I'm trying to achieve?
Here is the HTML for the pop-up window just for the sake of completeness:
<!DOCTYPE html>
<html>
<head>
<title>Print Results</title>
</head>
<body>
</body>
</html>
I tested your code on IE9 ( and IE8/7 browser mode).
Instead of el.innerHTML = table.html();
using jquery $(el).html(table.html()); fixed the issue.
To be able to use iframes and new windows, you should initialise them with addres: about:blank, before you write() to them. Also note that loading/opening the window/frame takes time, so you cannot write to them at right away. set a timeout, or check onload.
Please see this answer for more info.
Good luck!
I have a web site that works perfectly in FireFox 9.0.1.
In Chrome 16, it fails catastrophically. Too many errors to go through them all.
However, to pick one problem to start with (and hope that it be a clue that will help illuminate the core issues), I have buttons that are driven by Javascript to simply take someone to a new page.
The code for these buttons is as simple as it gets:
var siteURL = "http://mywebsite.com/";
function goHome()
{
window.location = siteURL + "index.html";
}
In FireFox, if I click the button that executes this code, I get taken to index.html. Easy peasy.
In Chrome, if I click this button, I get a 404 error page that says:
The requested URL /undefinedindex.html was not found on this server.
Why are these browsers behaving differently?
How do I get Chrome to play along?
As requested in the comments, I put alert(siteURL); in the function.
Firefox outputs:
http://mywebsite.com/
Chrome outputs
undefined
This works in Chrome 16:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.siteURL = "http://mywebsite.com/";
function goHome() {
console.log('moo?');
window.location.href = window.siteURL + "index.html";
}
</script>
</head>
<body>
go home
</body>
</html>
you should not use window.location. and instead assign the url to window.location.href
Therefore, it should have been
function goHome()
{
window.location.href = siteURL + "index.html";
}
And also...you get that 'undefined' value because you probably didn't assign any value to siteURL, or you forgot to declare it. make sure it really points to your current root url (if you want it to be)
If all browsers behaved exactly identical, I would be out of work.
It's impossible to tell what exactly goes wrong without seeing the complete code.
Judging from the snippet abobe, there must be some other function (in the same scope as goHome) that assigns undefined to siteURL and gets called prior to goHome
I need to run a super long JavaScript on my page. The client is complaining that IE shows a warning dialog for the script being too long. Unfortunately, there is no way we can reduce the length of the script, so I am trying to find a bypass for the problem.
According to Microsoft support website:
IE tracks the total number of executed
script statements and resets the value each time that a new script execution is started, such as from a timeout or from an event handler. It displays a
"long-running script" dialog box when
that value is over a threshold amount.
However I have tried to use both setInterval() and setTimeout() to break my script into pieces, but none is working. The browser I am using is IE8. My code is as following:
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
</head>
<body>
<div id ="test"></div>
<div id ="log"></div>
</body>
<script>
var repeat =0;
function heavyTask(){
if (repeat<50){
y = longRun();
setTimeout("heavyTask()",100);
}else{
$('#test').html("done!");
}
}
function longRun(){
for(var i =0; i<20000;i++){ }
repeat++;
$('#log').append('<div>repeat: '+ repeat +'</div>');
};
$(document).ready(function () {
setTimeout("heavyTask()",100);
});
</script></html>
In order to make the code work, you have to edit Registry, go to
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Styles, and set the DWORD value called "MaxScriptStatements" to 100,000. If the Styles key is not present, create a new key that is called Styles.
Thanks,
This processing limit is set by the browser, not JavaScript.
You can break your process down into smaller steps.
See this question: How can I give control back (briefly) to the browser during intensive JavaScript processing?
just some syntax errors... http://jsfiddle.net/Detect/HnpCr/3/