JavaScriptを使ってHTML要素からIDを渡す

-4

私の問題はかなりシンプルです。私はバニラのJavaScriptだけを使用して2つの要素idを切り替えることを試みています。JavaScriptを使ってHTML要素からIDを渡す

新しいIDに対して正しいCSSを使用するために最初のクリックで機能しますが、その後は新しいIDへのクリックイベントを認識していないようです。ここでこれを説明するための短いコード例は次のとおり

document.addEventListener("DOMContentLoaded", function(){ 
 
    var blueSpin = document.getElementById("blue-spinner"); 
 
    var orangeSpin = document.getElementById("orange-spinner"); 
 
    blueSpin.addEventListener("click", function() { 
 
     document.getElementById("h1").innerHTML = "You've Clicked Blue"; 
 
     blueSpin.setAttribute("id","orange-spinner"); 
 
     orangeSpin.setAttribute("id", "blue-spinner") 
 
    }); 
 
    orangeSpin.addEventListener("click", function() { 
 
     document.getElementById("h1").innerHTML = "You've Clicked Orange"; 
 
     orangeSpin.setAttribute("id", "blue-spinner"); 
 
     blueSpin.setAttribute("id", "orange-spinner"); 
 
    }); 
 
});

h1, h2 { 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t font-size: 45px; 
 
\t font-family: 'VT323', monospace; 
 
\t margin: 15px; 
 
} 
 
#blue-spinner { 
 
\t color: blue; 
 
} 
 
#orange-spinner { 
 
\t color: goldenrod; 
 
}

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> 
 
<html> 
 
    <body> 
 
     <h1 id="h1">Click Something:</h1> 
 
     <h2 id="blue-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2> 
 
     <h2 id="orange-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2> 
 
    </body> 
 
</html>

私の期待は、いずれかのスピナーをクリックすると、色が切り替わり、ヘッダが変更前クリックされた1識別することです。その後、同じ結果のいずれかのスピナーをクリックすることができます。

ご迷惑をおかけして申し訳ございません。 Happy X-mas Eve Eve！

出典

2017-12-24 JSONaLeo

IDを切り替えると、クリックイベントリスナーは引き続き元の要素を参照します。 – skyline3000

私は、CSSの代わりのIDでクラスセレクタを使用します。これらの行に沿ったもの：

var btns = document.getElementsByClassName("btn"); 
for(var i = 0; i < btns.length; i++){ 
    btns[i].addEventListener("click", function(e) { 
     var clss = e.target.getAttribute("class") 
     if(clss === undefined || cls === null){clss = "";} 
     if(cls.indexOf("blue-spinner") > -1){ 
      var output = "You clicked a blue spinner"; 
      e.target.setAttribute("class", "orange-spinner"); 
     }else{ 
      e.target.setAttribute("class", "blue-spinner"); 
      var output = "You clicked an orange spinner"; 
     } 
     var h = document.getElementById("h1"); 
     h.innerHTML = output; 
    }); 
}

出典

2017-12-27 03:09:40

要素のIDを変更すると、変更後にコードを更新する必要があります。

document.addEventListener("DOMContentLoaded", function() { 
 
    var blueSpin = document.getElementById("blue-spinner"); 
 
    var orangeSpin = document.getElementById("orange-spinner"); 
 

 
    var blueSpinClick = function() { 
 
     document.getElementById("h1").innerHTML = "You've Clicked Blue"; 
 
     blueSpin.removeEventListener('click', blueSpinClick); 
 
     orangeSpin.removeEventListener('click', orangeSpinClick); 
 
     blueSpin.removeEventListener('click', blueSpinClick); 
 

 
     blueSpin.setAttribute("id","orange-spinner"); 
 
     orangeSpin.setAttribute("id", "blue-spinner"); 
 

 
     blueSpin = document.getElementById("blue-spinner"); 
 
     orangeSpin = document.getElementById("orange-spinner"); 
 

 
     blueSpin.addEventListener("click", blueSpinClick); 
 
     orangeSpin.addEventListener("click", orangeSpinClick); 
 
    } 
 
    document.getElementById("blue-spinner").addEventListener("click", blueSpinClick); 
 

 
    var orangeSpinClick = function() { 
 
     document.getElementById("h1").innerHTML = "You've Clicked Orange"; 
 
     orangeSpin.removeEventListener('click', orangeSpinClick); 
 
     blueSpin.removeEventListener('click', blueSpinClick); 
 

 
     blueSpin.setAttribute("id","orange-spinner"); 
 
     orangeSpin.setAttribute("id", "blue-spinner"); 
 

 
     blueSpin = document.getElementById("blue-spinner"); 
 
     orangeSpin = document.getElementById("orange-spinner"); 
 

 
     blueSpin.addEventListener("click", blueSpinClick); 
 
     orangeSpin.addEventListener("click", orangeSpinClick); 
 
    } 
 
    document.getElementById("orange-spinner").addEventListener("click", orangeSpinClick); 
 
});

h1, h2 { 
 
\t font-weight: bold; 
 
\t text-align: center; 
 
\t font-size: 45px; 
 
\t font-family: 'VT323', monospace; 
 
\t margin: 15px; 
 
} 
 
#blue-spinner { 
 
\t color: blue; 
 
} 
 
#orange-spinner { 
 
\t color: goldenrod; 
 
}

<script src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script> 
 
<html> 
 
\t <body> 
 
\t \t <h1 id="h1">Click Something:</h1> 
 
\t \t <h2 id="blue-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2> 
 
\t \t <h2 id="orange-spinner"><i class="fa fa-cubes fa-spin" aria-hidden="true"></i></h2> 
 
\t </body> 
 
</html>

出典

2017-12-24 04:56:04

ありがとう、これは色が適切に切り替えることを許可しているようですが、ヘッダーがどの色がクリックされたかを正確に記述するために追加する必要があるのは何ですか？ – JSONaLeo

私はそれについて考えています...イベントリスナーを追加して削除してから再度追加する関数を用意する必要があると思います。これは面白い。 –

私はあなたが言ったことをすることができたと思っていますが、これは本当に変です... –

JavaScriptを使ってHTML要素からIDを渡す

答えて

関連する問題