Question

对JS来说很新，我正在努力解决当前的项目：尝试通过函数插入一些HTML variable = "yes"。单击按钮时变量值将发生变化。我一直在使用firebug查看变量值 - 它似乎没有改变按钮点击。

希望有人能够提供帮助。

我认为我的主要问题是设置变量值 - 但我当然可能是错的，所以我附加了一个codepen版本以获得好运:)

HTML：

<button id="butterbutton" onclick="imageAdd('yes'); ">
  <img id="worldimg" src="http://butterybeast.hol.es/world.png"></img>                
</button>

JS：

var beast
function imageAdd(choice) {
  beast = choice;
}

if (beast = "yes" ) {
  function imagemap () {
    document.getElementById('test1').innerHTML += '<img> an image map goes here';
  }
}

http://codepen.io/Puffincat/pen/Nrdgrz?editors=1010

Answer 1

您的代码只有几个问题。首先是：

if (beast = "yes") {

在这种情况下，您要将"yes"分配给beast，而不是将其比较。将其更改为

if (beast == "yes") {

接下来，底部的代码（if (beast == "yes") { ...）仅在开始时运行。相反，您希望在更新变量时运行该代码。将其移至imageAdd函数或更新UI的其他位置，然后从imageAdd调用它。当你在它时，删除imagemap函数声明。在if语句中声明一个函数是没有意义的。

var beast;
function imageAdd(choice) {
  beast = choice;
  updateUI();
}

function updateUI() {
  if (beast == "yes") {
    document.getElementById('test1').innerHTML += '<img> an image map goes here';
  }
}

Answer 2

你有一个函数imagemap包含在一个条件中但你没有调用该函数。

同样对于您的条件，beast始终为null，因为条件会立即被调用。

考虑以下调整

var beast;

function imagemap () {
  document.getElementById('test1').innerHTML += '<img> an image map goes here';
}

function imageAdd(choice) {
  beast = choice;

  if (beast === "yes" ) {
    imagemap();
  }
}

单击按钮更改变量值

2 个答案: