javascript - 文本转换、javascript 和其他我不希望发生的蠢事

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 与 myfunction(大写 F)。

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

动画 font-size 会导致您在浏览器重排时抖动，所以不要那样做。你并没有真正改变文本大小，所以你可以忽略它。如果你真的想要，你可以尝试使用 transform: scale 来缩放文本(可能在较小的版本中缩小而不是在较大的版本中放大以避免它看起来像像素)。

你不应该有重复的 id - 改为使用 class。

注意 querySelector() 只返回第一个匹配的元素，所以如果你想为所有按钮添加一个事件监听器，你需要使用 querySelectorAll() 并遍历结果列表。通过一次调用将事件监听器添加到多个元素更像是 jQuery 的事情。

固定版本:

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

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

.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;*/

}

<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>