我想在单击按钮时弹出一些文本(用户输入的三个甜点名称(。这是我的代码
<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:(
点击按钮显示#myDessertsdiv的代码
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>我不清楚你的按钮的确切用途，但如果你需要在输入框中插入的文本弹出警报框，你可以为你的输入框和按钮分配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);
});
我不确定是否有一种方法可以在一个警报框中编译所有输入，但这种方法将显示三个警报框。这里还有一支代码笔。
干杯。。。
如果您正在寻找：，请尝试此代码
当用户点击一个按钮时，将显示三个甜点名称(带有用户输入选项(，否则将隐藏
<!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>