<button> 在 to <option> 中用于段落更改

我已经编写了代码，您将在下面看到，但我想有一个像这样的下拉菜单' ' '

<option value="sel">Select Paragraph</option>
<option value="par1">Paragraph 1</option>
<option value="par2">Paragraph 2</option>
<option value="par3">Paragraph 3</option>
</select> ```

我已经尝试使用点击内部，但它没有工作，任何帮助将非常感激。

<html>
<body>
</head>

<div class="topnav">
<button onclick="myFunction()">change text on 1st paragraph</button>
<button onclick="myFunction2()">change text on 2nd paragraph</button>
<button onclick="myFunction3()">change text on 3rd paragraph</button>

</div>
<h1>1st Exercise</h1>

<p id="1">1st paragraph/p>
<p id="2">2nd paragraph/p>
<p id="3">3rd paragraph</p>
<script>
function myFunction() {
var person = prompt("Please enter your text");
document.getElementById("1").innerHTML = person;
}
function myFunction2() {
var person2= prompt("Please enter your text");
document.getElementById("2").innerHTML = person2;
}
function myFunction3() {
var person3 = prompt("Please enter your text");
document.getElementById("3").innerHTML = person3;
}
</script>
</body>
</html> ```

Onclick不工作与选项，因为你想…

您需要在select上使用onchange，您正在寻找.selectedIndex和.value属性。

<select onchange="document.getElementById(this.selectedIndex).innerHTML = this.value">
<option value="sel" >Select Paragraph</option>
<option value="par1">Paragraph 1</option>
<option value="par2">Paragraph 2</option>
<option value="par3">Paragraph 3</option>
</select>
<p id="1">111</p>
<p id="2">222</p>
<p id="3">333</p>

你可以根据需要改变段落的内容。在我的代码片段中有一个用option的值改变段落的基本示例。

如果你只想选择段落并从prompt对话框中设置它的内容，它将是

<select onchange="document.getElementById(this.selectedIndex).innerHTML = window.prompt()">

相关内容

最新更新

热门标签：