Question

我是html的新手，对它有非常基本的了解。我正在尝试为我的部门准备一个关于项目视觉效果如何工作的小型演示。我基本上想要做的是根据在表格上点击的内容填充一个句子。到目前为止，我很遗憾只能做资源部分，但没有实现填充和点击功能，也许有人可以提供帮助。

要填充的句子的资源数据是：

<li>Stage 2 phrase: <br/>  “<b>FROM</b> <font color="'#043345">< City 1 ></font> <b>TO</b> <font color="'#043345">< City 2 ></font> <b>VIA</b> <font color="'#043345">< City 3 ></font>”<br/><br/>

该表的资源数据是：

 <br/><table border="1" style="width:100%"><tr>
    <td>Chicago</td>
    <td>Istanbul</td> 
    <td>Budapest</td>
  </tr>
<tr>
    <td>Copenhagen</td>
    <td>Lisbon</td> 
    <td>Sydney</td>
  </tr>
<tr>
    <td>Washington</td>
    <td>Singapore</td> 
    <td>Barcelona</td>
  </tr>
<tr>
    <td>Helsinki</td>
    <td> Next </td> 
    <td> </td>
  </tr>
</table><br/><br/>

我想要做的是将城市名称作为表格中的按钮“clickcable”，点击后，城市按钮保持特定颜色，具体取决于是否先点击了第一个，第二个或第三个，例如：点击的第一个城市将是绿色点击的第二个城市将是黄色点击的第三个城市将是红色的当我点击第一个城市时，句子中的第一个占位符（城市1）应填充第一个单击的城市。

表格中的下一个按钮应清除所有点击的3个城市，并提供再次重启的选项。谢谢你的时间！干杯

Answer 1

这是你要找的东西吗？

var cityIter = 0;
var buttons = document.getElementsByTagName('button');
function clickCity(n) {
  switch(cityIter){
    case 0:     
document.getElementById(cityIter).style.backgroundColor = 'green';
      break;
    case 1:
document.getElementById(cityIter).style.backgroundColor = 'yellow';
      break;
    case 2:
document.getElementById(cityIter).style.backgroundColor = 'red';
      break;
  }
  document.getElementById(cityIter).value = buttons[n].innerHTML; 
  cityIter+=1;
}

Here
它的答案相当简单但仍然希望我帮助你:)。

根据表格中点击的内容填充列表

1 个答案: