当我使用 CSS 或 JS 单击 HTML 按钮时显示元素答案

【问题标题】：Show elements when I click a HTML button using CSS or JS当我使用 CSS 或 JS 单击 HTML 按钮时显示元素
【发布时间】：2020-08-25 05:04:29
【问题描述】：

我想在单击按钮时弹出一些文本（用户输入的三个甜点名称）。这是我的代码

<body>
    <p>your dessert</p>
    <input type="text" class="yum1">
        <p>your dessert</p>
    <input type="text" class="yum2">
        <p>your dessert</p>
    <input type="text" class="yum3">
</body>

你能给我一个 CSS（级联样式表）代码吗？如果没有，那么给我一个 JS (javascript) 代码。顺便说一句，我不知道 js :(

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet
按钮在哪里？您希望输入显示/隐藏还是仅弹出用户输入的文本？
按钮在底部，我想弹出输入框和文本
放松，我们不会坐在这里按重新加载重新加载，以防您回答评论
好的。这正是我想要的。

标签： javascript html css

【解决方案1】：

在按钮点击时显示#myDesserts div的代码

const buttonElement = document.querySelector('#yourProduct')

buttonElement.addEventListener('click', () => {
  const myDesertsElement = document.querySelector('#myDesserts')
  const desert1Val = document.querySelector('#yum1').value
  const desert2Val = document.querySelector('#yum2').value
  const desert3Val = document.querySelector('#yum3').value
  myDesertsElement.classList.toggle('hide')
  myDesertsElement.innerHTML = `Your inputs: ${desert1Val} ${desert2Val} ${desert3Val}`
})

.hide {
  display: none;
}

<body>
  <p>your dessert</p>
  <input id="yum1" type="text" class="yum1">
  <p>your dessert</p>
  <input id="yum2" type="text" class="yum2">
  <p>your dessert</p>
  <input id="yum3" type="text" class="yum3">
  <button id="yourProduct">your product</button>
  <div id="myDesserts" class="hide"></div>
</body>

【讨论】：

对不起。我的意思是你应该输出他们输入的内容
@DrakeKrewson 您现在可以查看吗？
检查是什么意思

【解决方案2】：

我没有清楚地了解您的按钮的确切用途，但是如果您需要在输入框中插入的文本在警报框中弹出，您可以将 id 分配给您的输入框和按钮然后将 eventListner 添加到按钮，该按钮将显示带有输入字段的警报框。

为 HTML 元素分配 id：

<body>
    <p> your dessert
    <input type="text" id='dessert'></p>
        <p> your dessert
    <input type="text" id='dessert2'></p>
        <p> your dessert
    <input type="text" id='dessert3'></p>
    <button id='myButton'> your products</button>
</body

Js 显示警告框：

document.getElementById("myButton").addEventListener("click", ()=> {

    var dessert = document.getElementById("dessert").value;
    var dessert2 = document.getElementById("dessert2").value;
    var dessert3 = document.getElementById("dessert3").value;
    alert( dessert);
    alert( dessert2);
    alert( dessert3);
});

我不确定是否有一种方法可以在一个警报框中编译所有输入，但这种方式会显示三个警报框。这里也是pen的代码。

干杯...

【讨论】：

对不起，我没有看到你分配给元素的类，不过你仍然可以使用它们而不是 id；记得在 js 中使用 document.getElementByClassName('')。
正是我想要的

【解决方案3】：

如果您正在寻找，请尝试此代码：

当用户点击一个按钮时，会显示三个甜点名称（带有用户输入选项），否则隐藏。

<!DOCTYPE html>
<html>
<body>
<div class ="hide" id="options">
  <p>your dessert 1</p>
  <input type="text" class="yum1">
  <p>your dessert 2</p>
  <input type="text" class="yum2">
  <p>your dessert 3</p>
  <input type="text" class="yum3">
  </div>
 <br/> <br/>
 <button id="yourProduct" onclick= reveal()>Input your choice of dessert</button>
</body>
<script>
function reveal(){
const buttonEvent = document.querySelector("#yourProduct")
const dessertOptions = document.querySelector("#options")
buttonEvent.onClick = dessertOptions.classList.toggle("hide")
}
</script>
<style>
.hide{
height:0px;
display:none;
}
</style>
</html>

【讨论】：