Заполнение списка в зависимости от того, что щелкнули по таблице

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» и после нажатия кнопки города останется в определенном цвете в зависимости от того, было ли нажато первое, второе или третье, например: Первый щелкнул по городу, будет зеленый Второй щелкнул город будет желтым Третий город щелкнул будет красным Когда я нажимаю первый город, первый placeholder (город 1) в предложении должен быть заполнен первым щелчком города.

Следующая кнопка в таблице должна очистить все 3 города, нажав кнопку и дать возможность снова перезапустить. Спасибо за ваше время! Cheers

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
Его довольно простой ответ, но все-таки надеюсь, что я могу вам помочь :)