javascript - 纯JS交互文字大小按钮

Question

我在 MDN 上浏览时遇到了这个问题。我试图理解为什么脚本 B 和 C 不起作用。

HTML:

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

A] 运行正常的 JS 脚本 ↓↓↓

document.getElementById('size-12').onclick = function() {
    document.body.style.fontSize = '12px';
};
document.getElementById('size-14').onclick = function() {
    document.body.style.fontSize = '14px';
};
document.getElementById('size-16').onclick = function() {
    document.body.style.fontSize = '16px';
};

B] JS 脚本不工作 ↓↓↓

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

C] JS 脚本也不起作用 ↓↓↓

function makeSizer(size) {
    document.body.style.fontSize = size + 'px';
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

这是一个 fiddle :https://jsfiddle.net/vnkuZ/7726/

Answer 1

B] 不起作用的原因是，当您执行 var size12 = makeSizer(12); 时，它不会实际分配函数 makeSizer(with size attribute 12 )到 size12 但它实际上调用 makeSizer(12) 并存储该函数的响应(在本例中未定义，因为函数不返回任何内容)。

同样的事情也发生在 C] 中，它会将 undefined 分配给 onclick。

要实现您想要的目标，您可以执行以下操作。

var makeSizer=function(size) {
    document.body.style.fontSize = size+'px';
    //console.log(size);
}

document.getElementById('size-12').onclick = function(){makeSizer(12);}
document.getElementById('size-14').onclick = function(){makeSizer(14);}
document.getElementById('size-16').onclick = function(){makeSizer(16);}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>