SetAttribute не работает в IE

Question

Эта переменная представляет собой входной сигнал, когда тип = текст

var x=document.getElementById('fiber-count'); 

У меня есть эта функция:

x.onkeyup=function(){ 
var u=x.value; 
var v=parseInt(u); 
var n=isNaN(u); 

if(n){ 
    this.setAttribute('placeholder', 'Invalid Character'); 

    setTimeout(function(){this.setAttribute('placeholder','');},3000); 
    x.value=""; 

} 
if(v<1){ 
    this.setAttribute('placeholder', "Min. value is 1"); 
    setTimeout(function(){this.setAttribute('placeholder','');},3000); 
    x.value=''; 
} 
if(v>864){ 
    this.setAttribute('placeholder', 'Max. value is 864'); 
    setTimeout(function(){this.setAttribute('placeholder','');},3000); 
    x.value=''; 
}; 

if(v<=12&&v>=1){ 
    tr.removeAttribute('disabled'); 
}else{ 
    tr.setAttribute('disabled', 'disabled'); 
} 

if(v==2){ 
    swr.removeAttribute('disabled'); 
}else{ 
    swr.setAttribute('disabled', 'disabled'); 
} 
if(v!==2){ 
    document.getElementById('cable_type').selectedIndex='0'; 
    f_c.classList.remove('hidden'); 
    var top=document.getElementsByName('subunit'); 
    for(i=0; i<top.length; i++){ 
     top[i].removeAttribute('disabled'); 
    } 

} 
if(v==1){ 
    document.getElementById('radio_option_1').checked=true; 
} 
if(v==12&&bast[0].checked){ 
    document.getElementById('diameter').selectedIndex='3'; 
} 
if(v>=12||v==8){ 
    document.getElementById('sub_four').removeAttribute('disabled'); 
    console.log('ribbon ought to be enabled'); 
}else{ 
    //document.getElementById('sub_four').setAttribute('disabled', 'disabled'); 
    document.getElementById('sub_four').setAttribute('disabled', 'disabled'); 
    console.log('ribbon disabled') 
} 
}; 

Проблема не заключается в следующем: ни один из SetAttribute() методы работают в IE. Я не могу понять, почему. Я использую метод setAttribute() для установки атрибутов placeholder и disabled нескольких элементов. Проблема заключается в следующем: я получаю это сообщение об ошибке, когда я вводил 12 во вход.

Я пытался использовать свойство обозначения

element.disabled=true; 

, но это не похоже на работу, как если установить его с помощью нотации свойств не сразу обновить его или что-то , Я бы опубликовал скрипку, но это не сработало, потому что эта ошибка возникает только в IE, поэтому JSFiddle не будет ее реплицировать.

Есть ли способ, которым я могу это исправить? Может быть, полипол? Пожалуйста, не JQuery.

Answer 1

Проблема здесь setTimeout работает в другом контексте, то ключевое слово this не ссылается на x, это означает, что не элемент DOM, но глобальный объект (window).

Вместо использовании this ключевого слова, используйте переменную x ссылаться на ваш DOM элемент, например:

x.setAttribute вместо this.setAttribute

Здесь вы можете проверить с этим макетом:

var x = { 
    onkeyup: function() { 
     console.log("this = x:", this === x); 
     console.log("this.value:", this.value); //x.value = "hello" 
     setTimeout(function() { 
      console.log("-setTimeout-"); 
      console.log("this:", this); //window, not 'x' as expected 
      console.log("this.value:", this.value); //undefined 
     }, 3000); 
    }, 
    value: 'hello' 
}; 

console.log(x.value); 
x.onkeyup(); 

Answer 2

this в обработчике setTimeout относится к window, а не <div id="fiber-count">. Вам необходимо сохранить и использовать его внутри setTimeout.

var self = this; 
setTimeout(function(){self.setAttribute('placeholder','');},3000); 

Или

setTimeout(function(){this.setAttribute('placeholder','');}.bind(this),3000); 

Answer 3

Извинение для ложная тревога, все. Я нашел проблему: у меня была другая переменная с именем x, и поскольку другая переменная x была локальной переменной, ссылки X внутри функции onchange ссылались на другую глобальную переменную x. Я просто изменил локальный x на глобальную переменную k и все ссылки на нее. Это решило проблему.