根据桌面上点击的内容填充列表

我在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个点击的城市并给出选项以重新启动一次。谢谢你的时间！欢呼声

来源

2015-07-20 Juan

您需要的JavaScript这一点。 HTML不是一种编程，而是一种超文本**标记**语言。 – cdMinix

如果你想学习如何做到这一点，你可以看看[Javascript基础指南]（https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics#Events）。 – cdMinix

这是你要找的东西吗？

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
其相当简单的答案，但还是希望我帮你:)

来源

2015-07-20 13:18:33 Direkts

这太棒了！正是我需要的。我如何添加一个“下一步”按钮来清除占位符并重新开始？ – Juan

这应该工作[链接]（http://codepen.io/anon/pen/rVZjBX）记得要upvote :) – Direkts

根据桌面上点击的内容填充列表

回答

相关问题