单击按钮更改变量值

Question

JS非常陌生，我正在努力处理当前的项目：如果variable = "yes"尝试通过函数插入一些HTML。 单击按钮后，变量值将更改。 我一直在使用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") {

在这种情况下，您要为beast指定"yes" ，而不是对其进行比较。 更改为

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();
  }
}