javascript - 在 HTML 中，如何在按钮中制作按钮

Question

我制作了一个按钮，并在段落中放置了一个 ID，以便在提到某个功能时输出一些文本，但是当我单击第一个按钮时，如何放置第二个按钮。(例如，如果我单击 1-2，它会显示按钮 1 和 2，3-4 会显示输出 3 和 4)如果您能解释一下，请尽量保持简单，因为我最近才开始编程。

我尝试更改一个按钮用于为另一个按钮编码的函数脚本中的innerHTML，但这不起作用。

<button class="button" onclick="contact()">Contact</button>
<p id=( "Identifier")></p>
<script>
  function contact() {
    document.getElementById("identifier").innerHTML = "<button class="
    button " onclick="
    email()
    ">email</button> <button class="
    button " onclick="
    email()
    ">phone</button>";
  }

  function email() {
    document.getElementById("identifier").innerHTML = "Email here";
  }

  function phone() {
    document.getElementById("identifier").innerHTML = "Phone here";
  }
</script>

当我使用上面的代码单击按钮时，其下方应显示另外两个按钮，当我单击它们时，应显示结果(在此，此处为电子邮件或此处的电话)，但没有显示。

Answer 1

首先， id被标记为<p id="identifier"></p>而不是 <p id=( "Identifier")></p >。其次，您可以使用反引号来编写多行字符串。

请修改您的代码如下

function contact() {
  document.getElementById("identifier").innerHTML = `
  <button class="button" onclick="email()">email</button> 
  <button class="button" onclick="phone()">phone</button>`;
}

function email() {
  document.getElementById("identifier").innerHTML = "Email here";
}

function phone() {
  document.getElementById("identifier").innerHTML = "Phone here";
}

<button class="button" onclick="contact()">Contact</button>
<p id="identifier"></p>