在javascript中制作按钮显示文本

Question

当我单击一个按钮时，我试图在我的 html 文件中显示一个数字（1、2 或 3）。

这是我到目前为止所拥有的：

<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>

我想要它，所以当我点击“button '1'”时，例如，函数 setDay() 运行，我的参数设置为 1。这样，变量“day”设置为 1，然后当变量 'day' 被打印，数字 1 被显示。 任何帮助将不胜感激。

Answer 1

您的代码有很多问题：

1. 你在你的函数中声明了 day 变量，所以只要函数完成，变量就会被销毁。 所以要坚持它，把它移到函数外面并从里面设置它。

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 在单击时出现在按钮上或出现在新位置。 无论哪种方式，您都希望将事件和数字传递给您的函数。 然后设置要显示数字的元素的innerHTML。

 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>