This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
'innerText' works in IE, but not in Firefox
Why the following script work on IE and safari but not in Firefox?
<html>
<head><script type="text/javascript">
function ShowHide(strTag ,strAttribute){
var elem = document.getElementsByTagName(strTag);
var elem1 = evt.srcElement || evt.target;
for (var i=0;i<elem1.children.length;i++){
elem1.children[i].innerText=="4" ? elem1.children
[i].innerText="6":elem1.children[i].innerText="4";
}
for (var i =0;i<elem.length;i++) {
if(elem[i].getAttribute(strAttribute)=="yes") {
elem[i].style.display=='none'? elem[i].style.display='block':elem
[i].style.display='none';
}
}
}
</script>
<div id=div1 onclick="ShowHide('div','exp2');">
<font face=Webdings color=BLACK>4</font> click here for some expandable
divs...</div>
<div id=div2 exp2='yes' style="display:none;">I'm a div!</div>
<div id=div3 exp2='yes' style="display:none;">More of them divs...</div>
<div id=div4 exp2='yes' style="display:none;">Me too! divs...</div>
</body>
</html>
The innerText property does not work on Firefox, that property is IE-specific (although IIRC is supported by Opera/Chrome).
Firefox uses the W3C standard Node::textContent property.
I don't see where "evt" comes from, but event objects are referenced differently in Firefox and IE
Firefox does not have an "innerText" attribute for manipulation
(That "evt" thing makes me wonder how this works even in IE.)
CMS is right but also incomplete.
var elem1 = evt.srcElement || evt.target;
This line fails because 'evt is not defined'
evt is undefined
Unless you're passing in the event object from the onclick handler somewhere not included in your snippet Firefox has no idea what evt is. If you want to find the target in this manner, pass it in as a parameter to the function.
Related
This question already has answers here:
Detect if any kind of IE (MSIE) [duplicate]
(6 answers)
Closed 4 years ago.
Do you know a script for notices or warnings only for internet explorer users?
I need to show a warning only for users in this specific browser.
Please, Can you help me?
I had to do this problem a while back. I ended up using javascript since support for conditional comments was dropped: https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)
My solution ended up looking like this:
<style>
#ie-banner {
display: none;
/* other styling */
}
</style>
<div id="ie-banner">
<div id="ie-message">
<h5>INCOMPATIBLE BROWSER</h5>
</div>
</div>
<script>
function isOldIE(userAgent) {
var msie = userAgent.indexOf('MSIE');
if (msie > 0) {
// IE 10 or older
return true;
}
// other browser, IE 11, or Edge
return false;
}
if (isOldIE(navigator.userAgent)) {
var ieWarning = document.getElementById('ie-banner');
ieWarning.setAttribute('style', 'display: block;');
// drop off my react app below
// var root = document.getElementById('root');
// document.body.removeChild(root);
}
</script>
Note that I remove the child like that and use older DOM apis because more standards methods simply don't work on IE... big surprise.
If you only care about IE9 and down, then I probably would just use conditional comments. Straight from the link above:
<html>
<!--[if IE]>
This content is ignored in IE10 and other browsers.
In older versions of IE it renders as part of the page.
<![endif]-->
</html>
I want to generate a virtual keyboardEvent(tab). I did some research on the same and got few usefully answers, however it not working for me. I understand that Javascript is event driven programming language so User should press require key, but I also want to understand that can we generate an keyboard event through JavaScript.
function fnGenerateTabKeyEvent() {
var e = document.createEventObject("KeyboardEvent");
e.keyCode = 9; // tab's ASCII
document.getElementsByName("someTxtBox").fireEvent("onkeyup", e);
}
<input type="text" id="someTxtBox"/>
It's not working in IE8 and I'm not getting any error either. I just want that whenever I can this function it should an keyboardevent(tab) from that text box.
Source1,Source2. Any suggestion will be helpful.
I think you were too hasty, as your code works on my machine:
<html>
<body>
<input type="text" id="someTxtBox" onkeyup="window.alert(event.keyCode)"/>
<script type='text/javascript'>
function fnGenerateTabKeyEvent() {
var e = document.createEventObject("KeyboardEvent");
e.keyCode = 9; // tab's ASCII
document.getElementById("someTxtBox").fireEvent("onkeyup", e);
}
fnGenerateTabKeyEvent();
</script>
</body>
</html>
There're of course some "issues" (like - accessing elements via getElementsByName, maybe having the script called before the <input>, but let's blame that on copy-pasting ;)) As such, on my IE, running in document mode 8 the alert successfully displays 9.
I'm creating a button input on the fly with "document.createElement('input')". The button generates fine in all browsers, but the function does not fire in IE 8 (or IE 7) as it does in all other browsers. I tested the code of the function being called in IE 7 & 8 and it works. Does anyone know a way around this browser issue?
Thanks for your help.
<script type="text/javascript">
function killWindow(){
window.open('', '_self', '');
window.close();
}
document.observe("dom:loaded",function(){
var forceCloseButton = document.createElement("input");
forceCloseButton.setAttribute("id","forceClose");
forceCloseButton.setAttribute("type","image");
forceCloseButton.setAttribute("src","SurveyResource/Button-Close");
forceCloseButton.setAttribute("class","button");
forceCloseButton.setAttribute("onclick","killWindow()");
var a=$('datstat_bottomcenterbuttons');
a.appendChild(forceCloseButton);
})
</script>
You should never never set an event handler with setAttribute.
You need to use addEventListener/attachEvent or set onclick directly.
Also setting class is going to have issues, look at className.
I am trying to access an element in my Edge Animate animation (which is a menu bar) from the parent document. The element has an onClick event which is triggered depending on the #bookmark in the URL of the parent web page. My code works perfectly in Firefox but does not work in Internet Explorer(10). IE is unable to see any elements within the 'Stage' div whereas Firefox can.
This is the JavaScript code on my parent page: -
<script language='javascript'>
var thisPage = window.location.pathname;
var fullurl = document.URL;
var xxx = fullurl.substring(fullurl.indexOf('#'));
var pageString = xxx.replace("#", "");
pageString = pageString.replace("http://www.mydomain.com/portfolio/photography.html", "");
if (pageString == "corporate") {
window.onload = function() {
var iframe = document.getElementById('U10511_animation');
var innerDoc = (iframe.contentDocument) ?
iframe.contentDocument : iframe.contentWindow.document;
var corporateRectangle = innerDoc.getElementById('Stage_Corporate_Rectangle');
corporateRectangle.click();
}
};
</script>
The above code will select the Corporate tab in the menu when viewed in Firefox but not IE when the URL has the suffix #corporate.
When I insert an 'alert' for the variable 'corporateRectangle' in Firefox it returns [HTMLObj] and in IE it returns 'null'.
Any ideas anyone? Thanks.
Have you tried checking the console for an error of some sort to help you and us understand the error?
IE JavaScript often works differently than in other browsers. And iframes are particularly problematical. One possibility is that you are getting the wrong document, such that the documentyou are retrieving either does not exist or does not contain the element you are looking for. So you just have to do some debugging. Here is how I would proceed. Run your script in IE.
1) Determine whether innerDoc is iframe.contentDocument or iframe.contentWindow.document. Make sure innerDoc is not null. If it is, try to get the document a different way.
2) Assuming innerDoc is not null, enumerate all of the elements in innerDoc. You can do that as follows:
for(i = 0; i < innerDoc.all.length; i++) alert(innerDoc.all [i].id);
Make sure that the id you are looking for is actually in the document. I suspect it isn't and that you need to get a different document object under IE.
I assume you are stuck with having to use iframes. If not, I suggest you use a different approach as iframes can be very problematical and browser-specific in how they work.
internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2)
override IE's native getElementById-method.
Read more about it here.
Ok... thanks to everyone who left suggestions.
The issue was that the menu animation has a preloader. Firefox ignores the preloader whereas IE treats the preloader as onLoad being complete. Therefore the attempt to access the element ID is null as it hasn't been loaded yet.
I decided to approach the problem from a different tack and read my bookmark from within the animation. This turned out to be a very simple solution once I figured out that I had to put the code in the first frame of the animation NOT in creationComplete or compositionReady.
This was the code: -
var bookmark = parent.window.location.hash;
bookmark = bookmark.replace("#", "");
if (bookmark == "corporate") {
sym.play("corp");
}
yes, as simple as that.
I have a page where I generate textareas via AJAX and fire events if those textareas are changed. This works great on IE9+ and other browsers such as Firefox, Chrome, Safari, etc. The problem is IE8 and under. They don't fire the change event. The code is:
Textarea looks like:
<textarea name="answer8158" id="answer8158"></textarea>
Javascript looks like:
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
//Do Something
}
});
Is there a workaround to make the change event work? I would be fine with PrototypeJS or pure javascript solution.
Thanks.
The solution is to go back to hard coding the onchange events in the AJAX. Unfortunately the document observe (blur/change) doesn't work for IE8 and under. Not how I like to write code, but is the only solution I have found.
You should explain more about how you are using the AJAX response, the following works fine in IE 6 with Prototype.js v 1.7.1. I've used DOM and innerHTML to emulate what you might be doing with the AJAX response:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
document.observe('change', function(e, el) {
if (el = e.findElement('textarea')) {
alert(el.value);
}
});
function addTextarea(el){
var ta = document.createElement('textarea');
ta.name = 'ta2';
el.parentNode.insertBefore(ta, el.nextSibling);
}
function addTextarea2(){
document.getElementById('s0').innerHTML = '<textarea></textarea>';
}
</script>
<textarea name="answer8158" id="answer8158"></textarea><br>
<button onclick="addTextarea(this);">Add using DOM</button><br>
<button onclick="addTextarea2();">Add using innerHTML</button><span id="s0"></span>
If you are programmatically changing the value and expecting a change event to fire, that is entirely different. BTW, I would write the observer as:
document.observe('change', function(e) {
var el = e.findElement('textarea');
if (el) {
alert(el.value);
}
});
which is only a few extra characters and a lot clearer.