如何为切换按钮点击后显示的[[phone]]文本添加tel链接

原代码里的<input>按钮没法直接添加可点击的电话链接，得调整结构，把按钮切换成带tel:协议的<a>标签来实现拨号功能。下面是修改后的完整代码：

HTML 部分 #

把原来的input按钮换成一个容器，里面同时放按钮和隐藏的电话链接：

<div id="phoneContainer">
  <button onclick="showPhone()" class="button">Visa nummer</button>
  <a href="tel:[[phone]]" class="button hidden" id="phoneLink">[[phone]]</a>
</div>

CSS 部分 #

新增隐藏类，同时保证链接样式和按钮一致：

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.hidden {
  display: none;
}

JavaScript 部分 #

修改函数，点击按钮后隐藏按钮、显示电话链接：

function showPhone() {
  document.querySelector('#phoneContainer button').classList.add('hidden');
  document.getElementById('phoneLink').classList.remove('hidden');
}

改动说明 #

• 用<button>代替原来的<input type="button">，同时新增<a>标签并设置href="tel:[[phone]]"，实现点击拨号功能
• 通过hidden类控制元素的显示/隐藏状态
• 点击按钮后切换两个元素的显示状态，首次点击后即可展示可点击的电话号码链接

内容的提问来源于stack exchange，提问作者Anton