使用javascript更改DIV按钮的值
这是一个新手问题：
我在HTML中定义一个按钮，如下所示：
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>为了避免显示太多的按钮，我想让按钮在
value="Select good points"和
value="Select bad points所以在javascript中，我使用
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getelementsbyclassname("btn-change").value="Select good points";
break;
case 'good':
nextMark = "bad"
$("btn-change").value = "Select bad points";
break;
}
}nextMark变量根据按钮的值更改放置在小叶贴图上的标记的颜色。
警报显示案例结构正在工作，但按钮值没有更改-执行此操作的正确方法是什么？
回答 3
Stack Overflow用户
发布于 2018-06-25 21:10:31
要使用JQuery为输入赋值，需要使用.val()而不是.value
var nextMark = "good";
$(".btn-change").on("click", function() {
switch (nextMark) {
case "bad":
nextMark = "good";
$(".btn-change").val("Select good points");
break;
case 'good':
nextMark = "bad";
$(".btn-change").val("Select bad points");
break;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
Stack Overflow用户
发布于 2018-06-25 21:14:42
您需要将document.getElementsByClassName("btn-change")[0].value =的索引指定为0
var nextMark = "good";
$(function(){
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getElementsByClassName("btn-change")[0].value = "Select good points";
break;
case 'good':
nextMark = "bad"
document.getElementsByClassName("btn-change")[0].value = "Select bad points";
break;
}
});
}) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
Stack Overflow用户
发布于 2018-06-25 21:44:48
首先，在结束… .on("click" …时，您缺少一个结束的);。
如果您使用的是jQuery，则需要记住首先包含该表(在<head>中位于顶部)，然后再定义JavaScript表。常见的做法是在末尾，就在</body>标记之前。
<script type="text/javascript" src="js.js"></script>
</body>接下来，对于警报，未定义nextMark。你可以用this做到这一点。在使用jQuery时，您应该遵守它，所以请使用$(this)。
将其放入函数中以定义nextMark
var nextMark = $(this);
完成后，您需要获取它的值，除非它会显示为you pressed the [object Object] button。要做到这一点，可以在目标的末尾添加.val()，方法是在警报中添加jQuery；so nextMark.val()。
现在要进行切换，您可以使用一条简单的if-else语句在两者之间进行切换：
if (nextMark.val() == "Select good points") {
nextMark.val("Select bad points");
} else {
nextMark.val("Select good points");
}如果你想使用switch，那么至少要让它工作，你需要告诉它它是什么情况。(…)中的内容开关的情况是它将用来检查的情况。如果我放入switch(x)并将x定义为var x = 1或var x = "one，我们将使用这一点来决定使用哪种情况：case 1:或case "one":将被执行。
var x = 1;
var y = "one";
switch(y) {
case 1:
// "y" is not 1.
break;
case "one":
// "y" is "one", so this will be exectuted.
break;
}因此，我们需要定义按钮何时是“好”或“坏”。您可以通过使用文字值来完成此操作，例如：
var myMark = $(this).val();
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
$(".btn-change").on("click", function() {
var nextMark = $(this);
alert("you pressed the " + nextMark.val() + " button");
/* Optional method: */
// if (nextMark.val() == "Select good points") {
// nextMark.val("Select bad points");
// } else {
// nextMark.val("Select good points");
// }
var myMark = $(this).val(); /* or var myMark = nextMark.val(); */
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery included in this example to make it work -->
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
https://stackoverflow.com/questions/51024167
复制相似问题