JavaScript onclick事件使用方法詳解
onclick是一個事件,當事件被觸發(fā)時就會執(zhí)行處理,onclick是一個處理鼠標點擊的事件。本篇文章就給大家分享關于JavaScript中onclick事件的用法。
我們首先來看一下onclick事件的語法
以下是如何使用onclick事件編寫。
使用document.getElementById()在文檔中指定id元素,并使用function(){}處理單擊該元素時發(fā)生的事件。
document.getElementById("button").onclick = function() { // 設置在此處單擊#button時要發(fā)生的事件 };
我們來看具體的示例
以下是使用onclick事件的示例。
單擊按鈕時更改文字
HTML代碼
<div><p>點擊</p></div>
CSS代碼
#text-button { display: block; cursor: pointer; width: 160px; text-align: center; border: 1px solid #232323; }
JavaScript代碼
document.getElementById("text-button").onclick = function() { document.getElementById("text").innerHTML = "我點擊了!"; };
瀏覽器上顯示結(jié)果如下
當點擊這個方框后,就會顯示如下效果:方框中文字改變了
點擊方框時,方框背景顏色改變
HTML代碼
<div id="square-button"></div>
CSS代碼
#square-button { width: 80px; height: 80px; background: #232323; } #square-button.blue { background: #21759b; } JavaScript代碼 document.getElementById("square-button").onclick = function() { this.classList.toggle("blue"); };
瀏覽器上顯示如下效果:是一個黑色的方框
當點擊這個方框后,顏色就會改變,顯示效果如下
顯示表單中輸入的內(nèi)容
HTML代碼
<p>你叫什么名字?</p> <input type="text" id="name"> <button type="button" id="form-button">輸入</button> <div id="form-text"></div>
CSS代碼
:focus { outline: 1px solid #666; } input[type="text"] { margin: 0 0 15px; padding: 8px 10px; border: 1px solid #d0d1d3; } button { padding: 8px 15px; background: #979380; color: #fff; border: none; }
JavaScript代碼
document.getElementById("form-button").onclick = function() { document.getElementById("form-text").innerHTML = "你好 " + document.getElementById("name").value + " 同學!"; }
瀏覽器上顯示效果如下
當你在文本框中輸入一個名字,比如張三,然后點擊輸入將會顯示如下效果
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JavaScript?onclick點擊事件-點擊切換圖片且自動播放
- JavaScript onclick 和 click 的區(qū)別詳解
- JavaScript中click和onclick本質(zhì)區(qū)別與用法分析
- JS addEventListener()和attachEvent()方法實現(xiàn)注冊事件
- js中addEventListener()與removeEventListener()用法案例分析
- JavaScript使用addEventListener添加事件監(jiān)聽用法實例
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- JavaScript onclick與addEventListener使用的區(qū)別介紹
相關文章
JavaScript 手動實現(xiàn)instanceof的方法
instanceof運算符用于檢測構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在某個實例對象的原型鏈上,本文重點給大家介紹JavaScript手動實現(xiàn)instanceof的問題,感興趣的朋友跟隨小編一起看看吧2021-10-10javascript檢查瀏覽器是否已經(jīng)啟用XX功能
本文給大家分享的是檢測瀏覽器是否支持cookie功能,檢查瀏覽器是否已經(jīng)啟用Java支持功能以及獲取當前瀏覽器的信息,十分的實用,有需要的小伙伴可以參考下。2015-07-07uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案
這篇文章主要給大家介紹了關于uni.getLocation和wx.getLocation方法調(diào)用無效也不返回失敗的解決方案,文中通過實例代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-04-04BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))
這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09js 原生判斷內(nèi)容區(qū)域是否滾動到底部的實例代碼
下面筆者就為大家分享一篇js 原生判斷內(nèi)容區(qū)域是否滾動到底部的實例代碼,具有很好的參考價值,希望對大家有所幫助2017-11-11- 這篇文章主要介紹了JS實現(xiàn)左邊列表移到到右邊列表功能,實現(xiàn)功能主要是左邊的下拉框內(nèi)容添加到右邊的下拉框,支持多選移動,且同時將右邊的下拉框?qū)ο笠瞥?,需要的朋友可以參考?/div> 2018-03-03
javascript對數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的,對數(shù)組元素的處理也是有非常多的方法,這里整理了下,需要的朋友可以參考下。2011-01-01最新評論