Javascript根据值选择并更改元素的内容

Question

我想根据我们选择的内容显示一些文字。这是我的选择选项：

<select onchange=Change(this.value)>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<p></p>

我想应用一个函数，根据选择的选项将某个文本插入到p元素中。这是功能：

Change(x){
if (x=="1"){$("p").innerHTML ="One cat"}
if (x=="2"){$("p").innerHTML ="Two cats"}
}

这是一个小提琴：https://jsfiddle.net/tksbkmdj/2/

Answer 1

这里有几点需要注意：

1-您需要声明函数Change

2-使用jQuery你不做innerHtml，而是.html(newtext)，例如。

干得好：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function Change(x) {
    if (x == "1") {
      $("p").html("One cat")
    }
    if (x == "2") {
      $("p").html("Two cats")
    }
  }
</script>

<select onchange=Change(this.value)>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

<p>
</p>

Answer 2

如果您使用的是jQuery，那么您可以大大简化：

function Change(x){
  if (x=="1"){
    $("p").text("One cat");
  }
  if (x=="2"){
    $("p").text("Two cats");
  }
}
  
$("select").change(function() {
  Change(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

<p></p>

Answer 3

试试这个代码。 innerHTML适用于JavaScript Try text()or html()

$("p").text("One Cat");
$("p").text("Two Cats");

要么

$("p").html("One Cat");
$("p").html("Two Cats");

Answer 4

你有以下错误：

• “改变”之前没有“功能”
• 更好地命名为“改变”
• $（“p”）返回一个jquery对象，你应该使用“$（'p'）[0]”或“$（'p'）。html”
• 该函数不在全局范围内，因此您无法像这样调用它

检查这个https：enter code here // jsfiddle.net / ftb0tmds /