首页 > 解决方案 > 如何使用多个按钮?

问题描述

对于以下代码,添加按钮 onclick 在单击按钮时会触发断点。单击“编辑”按钮时,我无法触发断点。我究竟做错了什么?

 <div id="indexContainer"style="display:none">
         <p style="font-size:40px; color:#9b9da0;">Select a server</p>
         <input type="button" value="Add" id="addBtnIcon" onclick="addBtnChange();">
         <input type="button" value="Edit" id="editBtn" onclick="editBtnClick();">
         <input type="button" value="Remove" id="removeBtn" style="padding:20px 20px;"><br>
         <form>
              <p id="serverName" value="Server name here"></p>
              <p id="serverValue" value="Server address here"></p><br>
              <input type="submit" id="saveBtn" value="Save" style="background-color:#9b9da0; padding:20px 140px;" disabled><br>
         </form>
         <div class="description">
              <p id="serverDesc">Description: A description goes here</p>
              <p id="serverSerial">Serial no: The serial number goes here</p>
         </div>
</div>

标签: buttononclick

解决方案


这是非常基本的事件处理程序

function addBtnChange()
{
 console.log("Add button clicked!");
}

function removeBtnClick()
{
 console.log("Remove button clicked!");
}

function editBtnClick()
{
 console.log("Edit button clicked!");
}
<div id="indexContainer" >
         <p style="font-size:40px; color:#9b9da0;">Select a server</p>
         <input type="button" value="Add" id="addBtnIcon" onclick="addBtnChange();">
         <input type="button" value="Edit" id="editBtn" onclick="editBtnClick();">
         <input type="button" value="Remove" id="removeBtn" style="padding:20px 20px; " onclick="removeBtnClick()"><br>
         <form>
              <p id="serverName" value="Server name here"></p>
              <p id="serverValue" value="Server address here"></p><br>
              <input type="submit" id="saveBtn" value="Save" style="background-color:#9b9da0; padding:20px 140px;" disabled><br>
         </form>
         <div class="description">
              <p id="serverDesc">Description: A description goes here</p>
              <p id="serverSerial">Serial no: The serial number goes here</p>
         </div>
</div>


推荐阅读