将选择菜单连接到从所选类别生成随机文本按钮可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<select id="category">
<option value="category1">类别1</option>
<option value="category2">类别2</option>
<option value="category3">类别3</option>
</select>
<button id="generateBtn">生成随机文本</button>
<p id="randomText"></p>
JavaScript:
// 监听选择菜单的变化事件
document.getElementById("category").addEventListener("change", function() {
// 创建生成随机文本按钮
var generateBtn = document.createElement("button");
generateBtn.textContent = "生成随机文本";
generateBtn.id = "generateBtn";
// 移除旧的生成按钮(如果存在)
var oldGenerateBtn = document.getElementById("generateBtn");
if (oldGenerateBtn) {
oldGenerateBtn.parentNode.removeChild(oldGenerateBtn);
}
// 添加新的生成按钮
document.body.appendChild(generateBtn);
});
// 监听生成随机文本按钮的点击事件
document.addEventListener("click", function(event) {
if (event.target && event.target.id === "generateBtn") {
// 根据所选类别生成随机文本
var category = document.getElementById("category").value;
var randomText = generateRandomText(category);
// 显示随机文本
document.getElementById("randomText").textContent = randomText;
}
});
// 根据所选类别生成随机文本的函数
function generateRandomText(category) {
var randomText = "";
// 根据不同的类别生成随机文本
switch (category) {
case "category1":
randomText = "这是类别1的随机文本。";
break;
case "category2":
randomText = "这是类别2的随机文本。";
break;
case "category3":
randomText = "这是类别3的随机文本。";
break;
default:
randomText = "请选择一个类别。";
}
return randomText;
}
这样,当用户选择不同的类别时,会动态生成一个生成随机文本按钮,并且点击按钮后会根据所选类别生成相应的随机文本,并显示在页面上。
领取专属 10元无门槛券
手把手带您无忧上云