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

Question

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

<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 :(

Answer 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>

Answer 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);
});

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

干杯...

Answer 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>