Javascriptのonclick関数に割り当てられたテキストが表示されない

-1

javascriptを使用してonclick関数でテキストを表示しようとしています。Javascriptのonclick関数に割り当てられたテキストが表示されない

i）両方のボタンをクリックすると、青色ではなく赤色のみが表示されます。

ii）赤色のボタンを最初にクリックすると赤色が表示され、もう一度赤色のボタンを選択すると青色が表示されます。

function myFunction() { 
 

 

 
    if (document.getElementById("demo").value == "11") { 
 
    document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>"; 
 
    } 
 

 
    if (document.getElementById("demo").value == "22") { 
 
    document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>"; 
 
    } 
 

 
}

<button id="demo" onclick="myFunction()" value="11">Red</button> 
 
<button id="demo" onclick="myFunction()" value="22">Blue</button> 
 
<div id="flight"></div>

出典

2016-09-02 sandesh phuyal

'あなたが重複したIDを持っている – depperm

id'sは一意である必要があります。.. – Li357

... OPはちょっとしたデバッグをしませんでした（この小さなコードで重複したID =効果的にデバッグすることはありません） –

あなたがコメントで見ることができるように、ID は一意である必要があります。それ以外の場合は、あなたのJSを台無しにするでしょう。

私はあなたがあなたの関数に現在のDOM要素を渡し、そのようにそれを使用することをお勧め：

function myFunction(elem) { 
 
    switch(elem.getAttribute('value')) { 
 
    case "11": 
 
     document.getElementById("flight").innerHTML = "<p style='color:red'>Red</p>"; 
 
     break; 
 
    case "22": 
 
     document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue</p>"; 
 
     break; 
 
    } 
 
}

<button onclick="myFunction(this)" value="11">Red</button> 
 
<button onclick="myFunction(this)" value="22">Blue</button> 
 
<div id="flight"></div>

出典

2016-09-02 18:32:44 blex

はIdsは、ドキュメント内で一意である必要があります。ブラウザでは、IDがの最初のボタンが認識され、2番目のIDが破棄されます。

代わりに、複数のイベントハンドラで問題を解決できます。

function displayRed() { 
 
    document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>"; 
 
} 
 

 
function displayBlue() { 
 
    document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>"; 
 
}

<button onclick="displayRed()" value="11">Red</button> 
 
<button onclick="displayBlue()" value="22">Blue</button> 
 
<div id="flight"></div>

出典

2016-09-02 18:33:00 Timo

はこれを試してみてください：

HTML：

<button onclick="myFunction(this)" value="11">Red</button> 

<button onclick="myFunction(this)" value="22">Blue</button> 

<div id="flight"> </div>

はJavaScript：

function myFunction(x) { 

if (x.value == "11") 
document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>"; 

else if (x.value == "22") 
    document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>"; 

}

決勝コード：私はこの質問を削除すべきだと思う

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
<button class="demo" onclick="myFunction(this)" value="11">Red</button> 
 
<button class="demo" onclick="myFunction(this)" value="22">Blue</button> 
 
<div id="flight"> </div> 
 

 
<script> 
 
    
 
function myFunction(x) { 
 
    
 
    if (x.value == "11") 
 
      document.getElementById("flight").innerHTML = "<p style='color:red'>Red Color</p>"; 
 
    
 
    else if (x.value == "22") 
 
     document.getElementById("flight").innerHTML = "<p style='color:blue'>Blue Color</p>"; 
 

 
} 
 
</script> 
 

 
</body> 
 
</html>

出典

2016-09-02 18:35:21 Ehsan

Javascriptのonclick関数に割り当てられたテキストが表示されない

答えて

関連する問題