getElemenentByID(...) is null or not an object foutmeling in bepaalde browsers
Dit script werkt perfect in Internet Explorer 9 en ik ging dan ook met een goed gevoel naar degene voor wie ik dit in elkaar heb gezet.
Helaas kwam er al snel antwoord terug dat het niet werkte.
Ik nogmaals testen en geen problemen gevonden, maar zowel thuis als op werk maak ik gebruik van IE9 en dus maar eens IE8 en 7 geprobeerd, en ja hoor, daarin werkt het inderdaad niet.
Na gezocht te hebben op internet, heb ik gevonden dat oudere IE browsers niet correct omgaan met getElementByID en daarbij staan ook oplossingen die dit zouden moeten kunnen verhelpen.
Helaas voor mij krijg ik die oplossingen niet aan de gang, simpelweg omdat het me aan kennis ontbreekt.
Mijn vraag is dan ook, hoe kan ik de code zo aanpassen, dat het ook in andere browsers dan IE9 gaat werken?
Het gaat om het volgende script:
Quote:
<script language="JavaScript" type="text/javascript">
<!--
function initPosition(textBox) {
var storedValue = textBox.value;
textBox.value = "";
textBox.select();
var caretPos = document.selection.createRange();
textBox.__boundingTop = caretPos.boundingTop;
textBox.__boundingLeft = caretPos.boundingLeft;
textBox.value = " ";
textBox.select();
caretPos = document.selection.createRange();
textBox.__boundingWidth = caretPos.boundingWidth;
textBox.__boundingHeight = caretPos.boundingHeight;
textBox.value = storedValue;
}
function storePosition(textBox) {
var caretPos = document.selection.createRange();
var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;
var boundingLeft = (caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;
textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;
textBox.__Column = (boundingLeft / textBox.__boundingWidth) + 1;
}
function updatePosition(textBox) {
storePosition(textBox);
document.forms[0].txtLine.value = textBox.__Line;
document.forms[0].txtColumn.value = textBox.__Column;
}
function onFocus(obj) {
var end = obj.value.length;
if(obj.setSelectionRange)
obj.setSelectionRange(end, end);
}
document.getElementById("txtLine").value = textBox.__Line;
document.getElementById("txtColumn").value = textBox.__Column;
//-->
</script>
<!--
function initPosition(textBox) {
var storedValue = textBox.value;
textBox.value = "";
textBox.select();
var caretPos = document.selection.createRange();
textBox.__boundingTop = caretPos.boundingTop;
textBox.__boundingLeft = caretPos.boundingLeft;
textBox.value = " ";
textBox.select();
caretPos = document.selection.createRange();
textBox.__boundingWidth = caretPos.boundingWidth;
textBox.__boundingHeight = caretPos.boundingHeight;
textBox.value = storedValue;
}
function storePosition(textBox) {
var caretPos = document.selection.createRange();
var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;
var boundingLeft = (caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;
textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;
textBox.__Column = (boundingLeft / textBox.__boundingWidth) + 1;
}
function updatePosition(textBox) {
storePosition(textBox);
document.forms[0].txtLine.value = textBox.__Line;
document.forms[0].txtColumn.value = textBox.__Column;
}
function onFocus(obj) {
var end = obj.value.length;
if(obj.setSelectionRange)
obj.setSelectionRange(end, end);
}
document.getElementById("txtLine").value = textBox.__Line;
document.getElementById("txtColumn").value = textBox.__Column;
//-->
</script>
Toevoeging op 16/04/2012 19:39:54:
Ik heb een tweetal oplossingen gevonden, maar deze kunnen niet zondermeer gekopieerd worden en dan werken met het zojuist geplaatste script. Voor de volledigheid, plaats ik beide oplossingen hier nog even.
Quote:
if (/msie/i.test (navigator.userAgent)) //only override IE
{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id)
{
var elem = document.nativeGetElementById(id);
if(elem)
{
//make sure that it is a valid match on id
if(elem.attributes['id'].value == id)
{
return elem;
}
else
{
//otherwise find the correct element
for(var i=1;i<document.all[id].length;i++)
{
if(document.all[id].attributes['id'].value == id)
{
return document.all[id];
}
}
}
}
return null;
}
}
[/quote]
{
document.nativeGetElementById = document.getElementById;
document.getElementById = function(id)
{
var elem = document.nativeGetElementById(id);
if(elem)
{
//make sure that it is a valid match on id
if(elem.attributes['id'].value == id)
{
return elem;
}
else
{
//otherwise find the correct element
for(var i=1;i<document.all[id].length;i++)
{
if(document.all[id].attributes['id'].value == id)
{
return document.all[id];
}
}
}
}
return null;
}
}
[/quote]
Quote:
//use browser sniffing to determine if IE or Opera (ugly, but required)
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
//fix both IE and Opera (adjust when they implement this method properly)
if(isOpera || isIE){
document.nativeGetElementById = document.getElementById;
//redefine it!
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem){
//verify it is a valid match!
if(elem.attributes['id'] && elem.attributes['id'].value == id){
//valid match!
return elem;
} else {
//not a valid match!
//the non-standard, document.all array has keys for all name'd, and id'd elements
//start at one, because we know the first match, is wrong!
for(var i=1;i<document.all[id].length;i++){
if(document.all[id].attributes['id'] && document.all[id].attributes['id'].value == id){
return document.all[id];
}
}
}
}
return null;
};
}
[/quote]
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
//fix both IE and Opera (adjust when they implement this method properly)
if(isOpera || isIE){
document.nativeGetElementById = document.getElementById;
//redefine it!
document.getElementById = function(id){
var elem = document.nativeGetElementById(id);
if(elem){
//verify it is a valid match!
if(elem.attributes['id'] && elem.attributes['id'].value == id){
//valid match!
return elem;
} else {
//not a valid match!
//the non-standard, document.all array has keys for all name'd, and id'd elements
//start at one, because we know the first match, is wrong!
for(var i=1;i<document.all[id].length;i++){
if(document.all[id].attributes['id'] && document.all[id].attributes['id'].value == id){
return document.all[id];
}
}
}
}
return null;
};
}
[/quote]
Als je het ergens gevonden hebt, geef eens de link.
Ikzelf raad mootools.net aan. Maar jquery is beter gedocumenteerd, beter in ondersteuning en er zijn meer scripts. Alleen ik heb geen ervaring met jquery.
Je moet niet voor alles een Framework gaan inhuren, want dat kost je meer dan dat het je oplevert.
Gewijzigd op 17/04/2012 14:26:54 door Wouter J
Wouter J op 17/04/2012 14:26:31:
Mebus, dit kost zeker niet heel veel coding. jQuery en MooTools zijn veel veel groter.
Je moet niet voor alles een Framework gaan inhuren, want dat kost je meer dan dat het je oplevert.
Je moet niet voor alles een Framework gaan inhuren, want dat kost je meer dan dat het je oplevert.
Als het inderdaad om zo een klein scriptje gaat is het zeker niet de moeite om mootools of jquery te gebruiken. Maar voor iemand die niet zo heel veel ervaring heeft met javascript is het wel een simpele oplossing. En het kost je meer kwa dataverbruik. Niet kwa scripting (als je het goed doet).
Kris Peeters op 17/04/2012 12:20:20:
Mijn eerste gevoel zegt me dat document.getElementById niet het probleem is.
Als je het ergens gevonden hebt, geef eens de link.
Als je het ergens gevonden hebt, geef eens de link.
Ik heb het script hier vandaan gehaald: KLIK
Vervolgens heb ik ergens anders vandaan deze 2 regels gehaald:
Code (php)
1
2
2
document.getElementById("txtLine").value = textBox.__Line;
document.getElementById("txtColumn").value = textBox.__Column;
document.getElementById("txtColumn").value = textBox.__Column;
Ik heb inmiddels uitgebreid gezocht op: document.getElementById not working in IE7 (of IE8)
Overal lees je dan dat die browsers geen goede afhandeling doen van getElementById, vandaar dus de gevonden oplossingen uit mijn 2e posting. Helaas werken die niet, waarschijnlijk omdat ik nog iets moet aanpassen om het met het eerste script te laten samenwerken.
Degene voor wie ik de site gemaakt heb, wil het graag gaan gebruiken, maar dat kan pas als dit probleem is opgelost.