从html选择菜单中选择的值

Question

我正在尝试单击战斗按钮打印"You have slain" + selected option + What I have now works for the first option,但如果您在下拉列表中选择其他选项并单击战斗,它仍然会显示Fly.

小提琴

var mon = document.getElementById('monsters');
var monster =mon.options[mon.selectedIndex].text;

$('#battle').click(function() {
    document.getElementById('dam').innerHTML = "You have hit the " + monster + " for 5 damage";
});

Answer 1

在您的解决方案中,您已全局声明所选值的值,该值仅在文档加载期间设置一次.为了计算正确的值,您必须在按钮单击期间在本地声明它们.

$('#battle').click(function() {
  var mon = document.getElementById('monsters');
  var monster =mon.options[mon.selectedIndex].text;
    document.getElementById('dam').innerHTML = "You have hit the " + monster + " for 5 damage";
});

工作示例:https://jsfiddle.net/DinoMyte/4dyph8jh/5/