loadイベントがクリックイベントの代わりに私の関数を呼び出すようになっています

Question

javascriptのない要素にクラスを追加しようとしています。ボタンをクリックしたときに発生する関数を定義しましたが、ページを読み込むと、指定されたクリックイベントではなく、onloadイベントを使用してクラスが即座に追加されます。これはwierdです。

<div id="div1" class="mydiv">A DIV</div> 
<input type="button" id="btn" value="click"> 

#div1 { 
width: 150px; 
height: 100px; 
background-color: red; 
position: relative; 
transition: top, left 0.43s 0.56s ease-in-out; 
} 
.move { 
    top: 200px; 
    left: 450px; 
    transition: top, left 0,4s 0.58s ease-in-out; 
} 

function ulterClass (el, newClass) { 
var currentClass = el.getAttribute('class'); 
if (typeof currentClass!== 'undefined' && currentClass) { 
    el.setAttribute('class', currentClass + ' '+ newClass); 
}else{ 
    el.setAttribute('class', newClass); 
} 
} 
var div = document.getElementById('div1'); 
var btn = document.getElementById('btn'); 
function ulterClass (el, newClass) { 
var currentClass = el.getAttribute('class'); 
if (typeof currentClass!== 'undefined' && currentClass) { 
    el.setAttribute('class', currentClass + ' '+ newClass); 
}else{ 
    el.setAttribute('class', newClass); 
} 
} 
var div = document.getElementById('div1'); 
var btn = document.getElementById('btn'); 

btn.addEventListener('click', ulterClass(div, 'move')); 

Answer 1

この問題はこの問題です。実行すると、関数を実行します。

btn.onclick = ulterClass(div, 'move'); 

代わりに、ボタン自体のonclick属性を使用してイベントハンドラを割り当てることができます。このように：

<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')"> 

function ulterClass(el, newClass) { 
 
    var currentClass = el.getAttribute('class'); 
 
    if (typeof currentClass !== 'undefined' && currentClass) { 
 
    el.setAttribute('class', currentClass + ' ' + newClass); 
 
    } else { 
 
    el.setAttribute('class', newClass); 
 
    } 
 
} 
 
var div = document.getElementById('div1'); 
 
var btn = document.getElementById('btn'); 
 
// When this statement runs, it executes the function. 
 
//btn.onclick = ulterClass(div, 'move');

#div1 { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    transition: top, left 0.43s 0.56s ease-in-out; 
 
} 
 

 
.move { 
 
    top: 200px; 
 
    left: 450px; 
 
    transition: top, left 0, 4s 0.58s ease-in-out; 
 
}

<div id="div1" class="mydiv">A DIV</div> 
 
<input type="button" id="btn" value="click" onclick="ulterClass(div, 'move')">

私はまた、代わりにイベントハンドラ内でグローバル変数divを参照するので、あなたがそこにそのIDを提供することができることを示唆しています。ここでは、addEventListenerでそれを行うことができる方法だ

function ulterClass(elementId, newClass) { 
 
    var el = document.getElementById(elementId); 
 
    var currentClass = el.getAttribute('class'); 
 
    if (typeof currentClass !== 'undefined' && currentClass) { 
 
    el.setAttribute('class', currentClass + ' ' + newClass); 
 
    } else { 
 
    el.setAttribute('class', newClass); 
 
    } 
 
} 
 
//var div = document.getElementById('div1'); 
 
//var btn = document.getElementById('btn'); 
 
// When this statement runs, it executes the function. 
 
//btn.onclick = ulterClass(div, 'move');

#div1 { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    transition: top, left 0.43s 0.56s ease-in-out; 
 
} 
 

 
.move { 
 
    top: 200px; 
 
    left: 450px; 
 
    transition: top, left 0, 4s 0.58s ease-in-out; 
 
}

<div id="div1" class="mydiv">A DIV</div> 
 
<input type="button" id="btn" value="click" onclick="ulterClass('div1', 'move')">

：

function ulterClass(el, newClass) { 
 
    var currentClass = el.getAttribute('class'); 
 
    if (typeof currentClass !== 'undefined' && currentClass) { 
 
    el.setAttribute('class', currentClass + ' ' + newClass); 
 
    } else { 
 
    el.setAttribute('class', newClass); 
 
    } 
 
} 
 
var div = document.getElementById('div1'); 
 
var btn = document.getElementById('btn'); 
 

 
btn.addEventListener('click', function() { 
 
    ulterClass(div, 'move'); 
 
});

#div1 { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: relative; 
 
    transition: top, left 0.43s 0.56s ease-in-out; 
 
} 
 

 
.move { 
 
    top: 200px; 
 
    left: 450px; 
 
    transition: top, left 0, 4s 0.58s ease-in-out; 
 
}

<div id="div1" class="mydiv">A DIV</div> 
 
<input type="button" id="btn" value="click" >