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