文本转换，javascript，其他tom-foolery在我不希望

Question

所以我一直在修补按钮悬停状态和一些非常基本的javascript，但我遇到了一些问题。

这是我的代码：

document.querySelector('.btn').addEventListener("click", myfunction());

function myFunction() {
  alert("HELLO!");
}

#btn {
  width: 150px;
  height: 100px;
  box-sizing: border-box;
  margin: 10px;
  background-color: #3498db;
  border: 15px outset #2980b9;
  color: #2c3e50;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 700px;
  text-tranform: uppercase;
  transition: all .5s;
}

#btn:hover {
  border: 10px outset #2980b9;
  color: #ecf0f1;
  font-size: 26px;

}

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>


<button id="btn" type="button">Click Me</button>

<button id="btn" type="button">Click Me</button>

<button id="btn" type="button">Click Me</button>

<button id="btn" type="button">Click Me</button>

我遇到的第一个问题是文本转换不会使按钮上的字母大写，不知道为什么。

其次，当按钮悬停在上面时，会进行简短的布局调整，并且所有按钮都会跳转1个像素。我已经筋疲力尽地试图找出原因。

最后，我的javascript无效。我是JS的新手，所以很可能是一些愚蠢的语法错误，但我可以使用澄清。

提前致谢！

Answer 1

一些拼写错误 - text-transform拼写错误; myFunction vs myfunction（大写F）。

您不想要addEventListener中的括号，因为您想要注册该功能，而不是在此处调用它。

动画font-size会导致您的浏览器重新流动，所以不要这样做。你并没有真正改变文字大小，所以你可以省略它。如果您真的想要，可以尝试使用transform: scale来缩放文本（可能会在较小的版本中缩小，而不是在较大的版本中缩小以避免像素一样）。

您不应该重复id s - 更改为使用class。

请注意，querySelector()仅返回第一个匹配元素，因此如果要向所有按钮添加事件侦听器，则需要使用querySelectorAll()并遍历结果列表。使用单个调用将事件侦听器添加到多个元素就更像是jQuery。

修正版：

＆＃13;

＆＃13;

var buttons = document.querySelectorAll('.btn'), i;
for (i = 0; i < buttons .length; i++) {
  buttons[i].addEventListener("click", myfunction);
}

function myfunction() {
  alert("HELLO!");
}

＆＃13;

.btn {
  width: 150px;
  height: 100px;
  box-sizing: border-box;
  margin: 10px;
  background-color: #3498db;
  border: 10px outset #2980b9;
  color: #2c3e50;
  font-family: 'Oswald', sans-serif;
  font-size: 25px;
  font-weight: 700px;
  text-transform: uppercase;
  transition: all .5s;
}

.btn:hover {
  border: 15px outset #2980b9;
  color: #ecf0f1;
  /*font-size: 26px;*/

}

＆＃13;

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>


<button class="btn" type="button">Click Me</button>

<button class="btn" type="button">Click Me</button>

<button class="btn" type="button">Click Me</button>

<button class="btn" type="button">Click Me</button>

＆＃13;

＆＃13;

＆＃13;