Создание кнопки отображения текста в javascript

Question

Я пытаюсь отобразить число (1, 2 или 3) в моем файле html, когда нажимаю кнопку.

Вот что у меня есть:

<tr>
    <td><button onclick="setDay(1)">1</button></td>
    <td><button onclick="setDay(2)">2</button></td>
    <td><button onclick="setDay(3)">3</button></td>
</tr>

<script type="text/javascript">
    function setDay(a) {
        var day = a
    }
    document.write(day)
</script>

Я хочу, чтобы при нажатии кнопки «1», например, запускалась функция setDay () с Мой аргумент установлен на 1. Таким образом, переменная «день» устанавливается на 1, а затем, когда переменная «день» печатается, отображается число 1. Любая помощь будет принята с благодарностью.

Answer 1

В вашем коде много неправильных вещей:

1. Вы объявляете переменную дня внутри своей функции, поэтому, когда функция завершается, переменная будет уничтожена. Поэтому, чтобы сохранить его, переместите его за пределы функции и установите его изнутри.

2. document.write очистит ваш документ и заменит все, что вы укажете. Следовательно, вам нужно иметь другой элемент, на котором вы можете отобразить день.

Код должен быть:

 var day;    
    function setDay(a) {
      day = a;        
      document.getElementById('day').innerHTML = day;
    }

  <tr>
        <td><button onclick="setDay(1)">1</button></td>
        <td><button onclick="setDay(2)">2</button></td>
        <td><button onclick="setDay(3)">3</button></td>
    </tr>
    
    Day : <p id='day'></p>
    

document.getElementById('day') получает элемент, в котором вы хотите отобразить свой день, тег абзаца здесь и устанавливает его innerHTML или html внутри элемент для указанного дня.

Answer 2

Не ясно, хотите ли вы, чтобы 1,2,3 появлялись на кнопках при нажатии или в новом месте. В любом случае вы хотите передать событие и номер в вашу функцию. Затем установите внутренний HTML элемента, в котором вы хотите, чтобы число отображалось.

function setDay(event,a) {
        e=event.target;
        e.innerHTML = a;
        var div = document.getElementById('here');
        var text = div.innerHTML;
        div.innerHTML = text + " " + a;
    }

button{
height:36px;
width:36px;
vertical-align:top;
}

<tr>
    <td><button onclick="setDay(event,1)"></button></td>
    <td><button onclick="setDay(event,2)"></button></td>
    <td><button onclick="setDay(event,3)"></button></td>
</tr>

<div id="here"></div>