別の要素をクリックすると、要素の背景色が変更されます

id="colorDisp"は、以下のいずれかの機能を実行すると色が変わることを期待していますが、代わりにbody要素の色が変わります。以下別の要素をクリックすると、要素の背景色が変更されます

コード：

function red() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "red"; 
 
\t } 
 
function blue() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "blue"; 
 
\t } 
 
function yellow() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "yellow"; 
 
\t } 
 
function green() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "green"; 
 
\t } \t 
 
function orange() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "orange"; 
 
\t } 
 
function violet() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "violet"; 
 
\t } 
 
function grey() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "grey"; 
 
\t } 
 
function black() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "black"; 
 
\t } 
 
function cream() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "#ffe6e6"; 
 
\t } 
 
function fushia() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "#ff00bf"; 
 
\t } 
 
function white() 
 
\t { 
 
\t \t document.body.style.backgroundColor = "white"; 
 
\t }

<center> 
 
\t <table style="padding-top: 200px;font-size:45"> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td> 
 
\t \t \t <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td> 
 
\t \t \t <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td> 
 
\t \t \t <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td> 
 
\t \t \t <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td> 
 
\t \t \t <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td> 
 
\t \t \t <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td> 
 
\t \t </tr> 
 
\t </table> 
 
\t 
 
</center>

Example output for the code above:

[1]http://i.imgur.com/lhqdFoi.jpg

This is sample output for my question

[2]http://i.imgur.com/cZw4iT3.jpg

出典

2017-03-16 Yeuhan Shen

あなたの質問は何ですか？ – nnnnnn

その2番目の画像に掲載されていますが、元のコードをクリックすると背景色が赤くなりますが、私はtd id：colorDispまたは表の特定のデータに背景色を入れたいと思っています –

大変ありがとう助けを求めて勉強中です –

bodyを、色を表示するタグで置き換えてください。コードにはgetElementById('colorDisp')です。

function red() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "red"; 
 
    } 
 
function blue() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "blue"; 
 
    } 
 
function yellow() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "yellow"; 
 
    } 
 
function green() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "green"; 
 
    } 
 
function orange() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "orange"; 
 
    } 
 
function violet() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "violet"; 
 
    } 
 
function grey() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "grey"; 
 
    } 
 
function black() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "black"; 
 
    } 
 
function cream() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "#ffe6e6"; 
 
    } 
 
function fushia() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "#ff00bf"; 
 
    } 
 
function white() 
 
    { 
 
     document.getElementById('colorDisp').style.backgroundColor = "white"; 
 
    }

<body> 
 
    <center> 
 
     <table style="padding-top: 200px;font-size:45"> 
 
      <tr> 
 
       <td style="background-color:#ff0040"><a href = "#" onclick = "red()">red</a></td> 
 
       <td style="background-color:#00bfff"><a href = "#" onclick = "blue()">blue</a></td> 
 
       <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffff00"><a href = "#" onclick = "yellow()">yellow</a></td> 
 
       <td style="background-color:#80ff00"><a href = "#" onclick = "green()">green</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffbf00"><a href = "#" onclick = "orange()">orange</a></td> 
 
       <td style="background-color:#8000ff"><a href = "#" onclick = "violet()">violet</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#808080"><a href = "#" onclick = "grey()">grey</a></td> 
 
       <td style="background-color:#000000"><a href = "#" onclick = "black()">black</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffe6e6"><a href = "#" onclick = "cream()">cream</a></td> 
 
       <td style="background-color:#ff00bf"><a href = "#" onclick = "fushia()">fushia</a></td> 
 
      </tr> 
 
     </table> 
 

 
    </center> 
 

 
</body>

出典

2017-03-16 02:05:49

あなたはdocument.body ID colorDispないとtd要素を選択する必要があります。ここでのソリューションです。また、要素に適用する1つのJavaScript関数に色を渡すこともできます。

function colorize(color) 
 
{ 
 
     document.getElementById("colorDisp").style.background = color; 
 
}

<body> 
 
    <center> 
 
     <table style="/*padding-top: 200px;*/font-size:45"> 
 
      <tr> 
 
       <td style="background-color:#ff0040"><a href = "#" onclick = "colorize('red')">red</a></td> 
 
       <td style="background-color:#00bfff"><a href = "#" onclick = "colorize('blue')">blue</a></td> 
 
       <td rowspan="5" width="300px" id="colorDisp" style="background-color:black"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffff00"><a href = "#" onclick = "colorize('yellow')">yellow</a></td> 
 
       <td style="background-color:#80ff00"><a href = "#" onclick = "colorize('green')">green</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffbf00"><a href = "#" onclick = "colorize('orange')">orange</a></td> 
 
       <td style="background-color:#8000ff"><a href = "#" onclick = "colorize('violet')">violet</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#808080"><a href = "#" onclick = "colorize('grey')">grey</a></td> 
 
       <td style="background-color:#000000"><a href = "#" onclick = "colorize('black')">black</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffe6e6"><a href = "#" onclick = "colorize('#ffe6e6')">cream</a></td> 
 
       <td style="background-color:#ff00bf"><a href = "#" onclick = "colorize('#ff00bf')">fushia</a></td> 
 
      </tr> 
 
     </table> 
 

 
    </center> 
 
</body>

出典

2017-03-16 02:08:50

このため、複数の機能を必要としません。以下試してください：あなたはこのような何かを持っている必要があり

function changeColor(color) 
 
{ 
 
    document.getElementById('colorDisp').style.backgroundColor = color; 
 
}

<center> 
 
     <table style="padding-top: 10px;font-size:45"> 
 
      <tr> 
 
       <td style="background-color:#ff0040"><a href = "#" onclick = "changeColor('red')">red</a></td> 
 
       <td style="background-color:#00bfff"><a href = "#" onclick = "changeColor('blue')">blue</a></td> 
 
       <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffff00"><a href = "#" onclick = "changeColor('yellow')">yellow</a></td> 
 
       <td style="background-color:#80ff00"><a href = "#" onclick = "changeColor('green')">green</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffbf00"><a href = "#" onclick = "changeColor('orange')">orange</a></td> 
 
       <td style="background-color:#8000ff"><a href = "#" onclick = "changeColor('violet')">violet</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#808080"><a href = "#" onclick = "changeColor('grey')">grey</a></td> 
 
       <td style="background-color:#000000"><a href = "#" onclick = "changeColor('black')">black</a></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="background-color:#ffe6e6"><a href = "#" onclick = "changeColor('#ffe6e6')">cream</a></td> 
 
       <td style="background-color:#ff00bf"><a href = "#" onclick = "changeColor('#ffe6e6')">fushia</a></td> 
 
      </tr> 
 
     </table> 
 

 
    </center>

出典

2017-03-16 02:12:28 Mamun

。コード

function updateColor(event) 
{ 
    var color = event.parentElement.style.backgroundColor; 
    document.getElementById('colorDisp').style.backgroundColor = color; 
}

（ここでは一例http://plnkr.co/edit/FSwM1fDyzB7YgT4Or4B2?p=previewである）非常に良くあるHTML：

<table style="padding-top: 200px;font-size:45"> 
      <tr> 
       <td style="background-color:#ff0040"><a href = "#" onclick = "updateColor(this)">red</a></td> 
       <td style="background-color:#00bfff"><a href = "#" onclick = "updateColor(this)">blue</a></td> 
       <td rowspan="5"width="300px" id="colorDisp" style="background-color:black"></td> 
      </tr> 
      <tr> 
       <td style="background-color:#ffff00"><a href = "#" onclick = "updateColor(this)">yellow</a></td> 
       <td style="background-color:#80ff00"><a href = "#" onclick = "updateColor(this)">green</a></td> 
      </tr> 
      <tr> 
       <td style="background-color:#ffbf00"><a href = "#" onclick = "updateColor(this)">orange</a></td> 
       <td style="background-color:#8000ff"><a href = "#" onclick = "updateColor(this)">violet</a></td> 
      </tr> 
      <tr> 
       <td style="background-color:#808080"><a href = "#" onclick = "updateColor(this)">grey</a></td> 
       <td style="background-color:#000000"><a href = "#" onclick = "updateColor(this)">black</a></td> 
      </tr> 
      <tr> 
       <td style="background-color:#ffe6e6"><a href = "#" onclick = "updateColor(this)">cream</a></td> 
       <td style="background-color:#ff00bf"><a href = "#" onclick = "updateColor(this)">fushia</a></td> 
      </tr> 
     </table>

出典

2017-03-16 02:13:48

別の要素をクリックすると、要素の背景色が変更されます

答えて

関連する問題