有一个下拉菜单,包含三个选项。当选择不同的选项时,触发一个函数,再控制台输出所选选项的文本内容 创建一个输入框和一个按钮。当输入框获得焦点时,背景颜色变为黄色;有内容变绿色。点击按钮时,获取输入框中的值并在控制台输出
时间: 2024-09-20 13:12:12 浏览: 25
在HTML、CSS和JavaScript中,你可以使用以下代码来实现这个功能:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>下拉菜单及按钮交互</title>
<style>
.input-focused {
background-color: yellow;
}
input[type="text"]:focus {
outline: none;
background-color: green;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<label for="dropdown">请选择:</label>
<select id="dropdown" onchange="outputOption(this)">
<option value="">无选项</option>
<option value="选项一">选项一</option>
<option value="选项二">选项二</option>
<option value="选项三">选项三</option>
</select>
<br><br>
<input type="text" id="inputField" onfocus="setInputFocus()" onblur="removeInputFocus()">
<button onclick="console.log(getInputValue())">获取并输出</button>
<script>
function outputOption(dropDown) {
console.log("所选选项:", dropDown.options[dropDown.selectedIndex].text);
}
function setInputFocus() {
var input = document.getElementById('inputField');
input.classList.add('input-focused');
}
function removeInputFocus() {
var input = document.getElementById('inputField');
input.classList.remove('input-focused');
}
function getInputValue() {
return document.getElementById('inputField').value;
}
</script>
</body>
</html>
```
在这个例子中:
- 下拉菜单`<select>`的`onchange`事件会触发`outputOption`函数,该函数会在控制台打印出所选选项的文字。
- `input`元素的`onfocus`和`onblur`事件分别用于改变输入框的背景色:聚焦时变黄,失去焦点时恢复默认。
- 按钮的`onclick`事件会调用`getInputValue`函数,从输入框获取值并打印到控制台。