0

У меня есть 9 ячеек и 2 текста. Мне нужно, чтобы при клике по первой ячейке таблицы в ней появлялся один из двух этих текстов с вероятностью 50%. Аналогично с другими ячейками. Надеюсь, что вы сможете мне помочь.

<html>
 <head>
    <meta charset="UTF-8">
    <title>Page</title>
    <script src="game.js"></script>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <table border="1" cellpadding="20px;">
  <tr>
   <td id="c1"><span>Cell 1</span></td>
   <td id="c2"><span>Cell 2</span></td>
   <td id="c3"><span>Cell 3</span></td>
   <td id="c4"><span>Cell 4</span></td>
  </tr>
 </table>
 </body>

3
  • 3
    А в чём вопрос/проблема?
    – Regent
    5 янв 2016 в 17:26
  • 1
    а где еще 5 ячеек?
    – Grundy
    5 янв 2016 в 17:30
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 6 янв 2016 в 2:21

2 ответа 2

2

Вот так, например, можно сделать для 1-й ячейки:

var text1 = "qwe", text2 = "asd";
$("#c1").click(function () {
    var text = Math.random() < 0.5 ? text1 : text2;
    $(this).html(text);
});
4
  • 1
    ага, а если внутри использовать this а снаружи - класс, то и сразу для всех ячеек :)
    – Grundy
    5 янв 2016 в 17:38
  • @PavelMayorov, можно всем ячейкам дать один класс и затем останется только заменить $("#c1") на $("class_name"). Вообще вариантов много как можно это сделать.
    – Mencey
    5 янв 2016 в 21:21
  • 1
    Так, от хренотени с выбором по селектору два раза избавились уже :) Только теперь будет ошибка времени выполнения - нет у this метода html! 5 янв 2016 в 21:25
  • @PavelMayorov, поправил.
    – Mencey
    5 янв 2016 в 21:31
1

Первый вариант:

function rndText() {
    this.innerHTML = Math.random() < 0.5 ? "Text 1" : "Text 2";
}
function onLoad() {
    var cells = document.getElementsByClassName("cell");
    for (var i = 0; i < cells.length; ++i)
        cells[i].onclick = rndText;
} 
<body onload="onLoad();">
    <table border="1" cellpadding="20px;">
        <tr>
            <td id="c1" class="cell"><span>Cell 1</span></td>
            <td id="c2" class="cell"><span>Cell 2</span></td>
            <td id="c3" class="cell"><span>Cell 3</span></td>
            <td id="c4" class="cell"><span>Cell 4</span></td>
        </tr>
    </table>
</body>

Второй вариант:

function onClick(sender) {
    sender.innerHTML = Math.random() < 0.5 ? "Text 1" : "Text 2";;
}
<table border="1" cellpadding="20px;">
    <tr>
        <td id="c1" onclick="onClick(this);"><span>Cell 1</span></td>
        <td id="c2" onclick="onClick(this);"><span>Cell 2</span></td>
        <td id="c3" onclick="onClick(this);"><span>Cell 3</span></td>
        <td id="c4" onclick="onClick(this);"><span>Cell 4</span></td>
    </tr>
</table>

2
  • На самом деле, куда проще и эффективнее повесить обработчик на таблицу целиком. 5 янв 2016 в 21:35
  • @PavelMayorov Повесить проще. Но придётся разбираться с источником события - щелчок может попасть во вложенный элемент или в границу таблицы.
    – user194374
    6 янв 2016 в 6:58

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.