添加两个按钮，按下时显示不同的消息（仅在 html 中）[关闭]答案

【问题标题】：adding two button which shows different messages when pressed ( only in html ) [closed]添加两个按钮，按下时显示不同的消息（仅在 html 中）[关闭]
【发布时间】：2020-02-20 10:44:29
【问题描述】：

有人可以帮我创建一个 4 个不同的按钮，当单独按下时显示不同的消息。

但是，使用我现在使用的以下编码，当我按下按钮 2 时，即使按钮 2 有自己的消息，它也会显示与按钮 1 相同的消息。

请注意，我只能使用 HTML 代码，因为我在仅启用 html 的页面上使用此代码。请帮忙。

【问题讨论】：

能否请您在此处发布代码 sn-p，到目前为止您尝试了什么？
如果您不能在页面上使用 JavaScript，我不确定这是否可以实现。有什么限制？
× message1
#Martin 我正在使用网站构建器上的页面，该页面只允许使用 html 代码

标签： html button onclick

【解决方案1】：

你期待这样的事情吗？

.alert {
	display: none;
	padding: 20px;
	background-color: #f44336;
	color: white;
}

.closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

<button onclick="document.getElementById('alert1').style.display='block'">Buton1</button>
<div id="alert1" class="alert">
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> message1
</div>

<button onclick="document.getElementById('alert2').style.display='block'">Buton2</button>
<div id="alert2" class="alert">
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> message2
</div>

<button onclick="document.getElementById('alert3').style.display='block'">Buton3</button>
<div id="alert3" class="alert">
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> message3
</div>

<button onclick="document.getElementById('alert4').style.display='block'">Buton4</button>
<div id="alert4" class="alert">
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> message4
</div>

创建具有unqiue id的div元素并在其上添加事件侦听器，并添加通用类以对其进行样式化

更新

您也可以在 html 文件中编写如下所示的 javascript

<html>
 <script>
  console.log('Javascript works here');
 </script>
</html>

更新 2
我已经创建了一种更简洁的方式来满足您的要求（但使用脚本标签）

.alert {
	display: none;
	padding: 20px;
	background-color: #f44336;
	color: white;
}

.closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

<button data-msg-id="alert1">Buton1</button>
  <button data-msg-id="alert2">Buton2</button>
  <button data-msg-id="alert3">Buton3</button>
  <button data-msg-id="alert4">Buton4</button>
  
  <div id="alert1" class="alert">
   <span class="closebtn">&times;</span> message1
  </div>
  <div id="alert2" class="alert">
   <span class="closebtn">&times;</span> message2
  </div>
  <div id="alert3" class="alert">
   <span class="closebtn">&times;</span> message3
  </div>
  <div id="alert4" class="alert">
   <span class="closebtn">&times;</span> message4
  </div>
  
  <script>
    console.clear();
    const buttonsList = document.querySelectorAll('button'), closeBtnList = document.querySelectorAll('.closebtn');
    buttonsList.forEach(each => each.addEventListener('click', handleBtnClick));
    closeBtnList.forEach(each => each.addEventListener('click', handleCloseBtnClick));
    
    function handleBtnClick(evt) {
      document.querySelectorAll('.alert').forEach(each => each.style.display = 'none');
      document.querySelector('#'+evt.target.dataset.msgId).style.display = 'block';
    }
    
    function handleCloseBtnClick(evt) {
      evt.target.parentElement.style.display = 'none';
    }
  </script>

【讨论】：

您也可以在脚本标签内的html文件中编写javascript（答案已更新），您使用的是什么网站构建器？
@Sameer 非常感谢，这正是我想要的，但按钮没有在同一行对齐（以前我有 4 个按钮，它们在同一行对齐，但现在按钮 1 在第一个line 和 rest 3 按钮在第二行）。如果我们单击任何其他按钮并打开我们单击的新按钮的消息，我们还有什么方法可以自动关闭当前消息。（例如，如果我们在框外单击，则消息框会关闭）非常感谢您的帮助，我数周以来一直在寻找此解决方案
@Learningcurb 您使用的是什么网站构建器？，您可以在脚本标签内的 html 文件中编写 javascript 吗？
我正在使用 squarespace
没有脚本标签不起作用只有html标签起作用