Javascript addEventListener関数の呼び出し

誰でも私に関数strikeTextを動作させる方法を教えてください。ブラウザの検査でこのエラーが発生します。Javascript addEventListener関数の呼び出し

Uncaught ReferenceError: newButton is not defined at HTMLButtonElement.strikeText (todo.js:29)

PS：インライン関数は動作しますが、私は別の関数を作りたい場合は、それが機能していません。 JavaScriptコードあなたはその後に実行してくださいここで

HTML

<!DOCUMENT html> 
<html> 

<head> 
    <title>To Do List</title> 
</head> 

<body> 
    <form id="myForm"> 
     <input type="text" id="inputId" value=""> 
     <button type="button" id="submitButton">Add</button> 
     <ul id="list"> 
     <li> 
      <button type="button">Do that</button> 
     </li> 
     <li> 
      <button type="button">Do this</button> 
     </li> 
     </ul> 
    </form> 
    <script src="todo.js"> 
    </script> 
</body> 

</html>

JavaScriptが

var submitB = document.getElementById("submitButton"); 
var striked = false; 
submitB.addEventListener("click", addLi); 

function addLi() { 
    var input = document.getElementById("inputId").value; 
    var newButton = document.createElement("button"); 
    var ulList = document.getElementById("list"); 
    var newLi = document.createElement("li"); 
    var newText = document.createTextNode(input); 
    newButton.appendChild(newText); 
    newButton.addEventListener("click", strikeText); 
    newButton.setAttribute("type", "button"); 
    newLi.appendChild(newButton); 
    ulList.appendChild(newLi); 
    var reset = document.getElementById("myForm").reset(); 
} 

function strikeText() { 
    striked = !striked; 
    switch (striked) { 
     case true: 
      newButton.style.textDecoration = "line-through"; 
      break; 
     case false: 
      newButton.style.textDecoration = "none"; 
      break; 
    } 
}

出典

2017-11-15 Tornnado

'newButton'は、あなたの関数の範囲内で定義されていない「この」の代わりに使用します。 – jmargolisvt

@jmargolisvtええ、私はそれを理解しましたが、どうすれば関数に渡すことができますか？ – Tornnado

一般に、グローバルスコープに入れるか、paramとして渡します。 – jmargolisvt

はjmargolisvtが言ったように、newButtonはあなたのstrikeText機能では未知数です。ソリューション：

case true: 
this.style.textDecoration="line-through"; 
break; 
case false: 
this.style.textDecoration="none"; 
break;

また、どのような私の場合で働いていたことstrikeTextパラメータを使用していました：

function strikeText(event){ 
    striked=!striked; 
    switch(striked){ 
    case true: 
    event.target.style.textDecoration="line-through"; 
    break; 
    case false: 
    event.target.style.textDecoration="none"; 
    break; 
    } 
}

出典

2017-11-15 18:41:19 Igor

私はこれで試しましたが、動作していません...同じエラー – Tornnado

どのブラウザですか？私はChrome 61.0.3163.100でテストしました。 – Igor

私の最初のバージョンはIE11でも動作しました。両方の行を変更したことを確認できますか？たぶん、コメントなどにあなたのコードを貼り付けることができますか？ – Igor

スニペットをここで働くそのので、唯一の可能な理由は次のようになります。..次のようにDOMが準備完了した後にロードしてアクセスします。

var submitB = document.getElementById("submitButton"); 
 
var striked=false; 
 

 
submitB.addEventListener("click", addLi); 
 

 
function addLi() { 
 
    var input = document.getElementById("inputId").value; 
 
    var newButton = document.createElement("button"); 
 
    var ulList = document.getElementById("list"); 
 
    var newLi = document.createElement("li"); 
 
    var newText = document.createTextNode(input); 
 

 

 
    newButton.appendChild(newText); 
 
    newButton.addEventListener("click",strikeText); 
 
    newButton.setAttribute("type", "button"); 
 

 

 
    newLi.appendChild(newButton); 
 
    ulList.appendChild(newLi); 
 
    var reset = document.getElementById("myForm").reset(); 
 
} 
 

 
function strikeText(){ 
 

 
    striked=!striked; 
 
    switch(striked){ 
 
    case true: 
 
    newButton.style.textDecoration="line-through"; 
 
    break; 
 
    case false: 
 
    newButton.style.textDecoration="none"; 
 
    break; 
 
    } 
 
}

<!DOCUMENT html> 
 
<html> 
 

 

 
<head> 
 

 
    <title>To Do List</title> 
 

 
</head> 
 

 

 
<body> 
 

 
    <form id="myForm"> 
 
     <input type="text" id="inputId" value=""> 
 
     <button type="button" id="submitButton">Add</button> 
 
     <ul id="list"> 
 
      <li><button type="button">Do that</button></li> 
 
      <li><button type="button">Do this</button></li> 
 
     </ul> 
 
    </form> 
 

 
    <script src="todo.js"> 
 

 
    </script> 
 

 
</body> 
 

 

 
</html>

出典

2017-11-15 18:40:18

Javascript addEventListener関数の呼び出し

答えて

関連する問題