javascript Onclick函数错误，未定义函数

o8x7eapl 于 2023-05-21 发布在 Java

关注(0)|答案(3)|浏览(176)

最近几天，我一直在尝试使用
document.querySelector.（'class name'）.style.color
当使用onclick将函数放入按钮时，它总是说我的函数 changeColor没有定义。 你们中的一些人可以帮助我吗？上面还写着有一个意外的信物，麻烦你也帮我弄一下！

<body>
    <div class="box">
      <h1> Hello</h1>
    </div>
       <script>
function changeColor(){
  document.querySelector.('.box').style.color = 'pink';
}
    </script>
    <button class="pink">Pink</button>
  </body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/72322326/onclick-function-error-function-isnt-defined

3条答案

按热度按时间

lztngnrs1#

好吧，你的代码中没有任何东西会试图调用你的函数，所以我不能确定你的问题是什么，但是要将按钮的click事件连接到你的函数，你用途：.addEventListener()。
现在，你有一个错字：

document.querySelector.('.box') // <-- The dot before ( is wrong

script元素应该是关闭body标记之前的最后一件事，这样当脚本运行时，所有的HTML都将被解析到内存中。

<div class="box">
  <h1> Hello</h1>
</div>
<button class="pink">Pink</button>
 
<script>
  document.querySelector("button.pink").addEventListener("click", changeColor);
  function changeColor(){
    document.querySelector('.box').style.color = 'pink';
  }
</script>

虽然这是可行的，但应尽可能避免内联样式，因为它们是最难覆盖的CSS样式类型，并导致代码重复。相反，尽可能（几乎总是）使用CSS类，如下所示：

.pinkText { color:pink; }

<div class="box">
  <h1> Hello</h1>
</div>
<button class="pink">Pink</button>
 
<script>
  // Get your DOM element references just once, not every time the function runs:
  const box = document.querySelector('.box');
  document.querySelector("button.pink").addEventListener("click", changeColor);
  function changeColor(){
    box.classList.add('pinkText');
  }
</script>

赞(0）回复(0）举报 2023-05-21

dldeef672#

<!DOCTYPE html>
<html>
<body>
    <div class="box">
      <h1> Hello</h1>
    </div>
    <button class="pink" onclick="changeColor()">Pink</button>
  </body>
       <script>
function changeColor(){
  document.querySelector('.box h1').style.color = 'pink';
}
    </script>
</html>

赞(0）回复(0）举报 2023-05-21

46scxncf3#

代码中有两个简单的错误可以很容易地修复。
1.函数中的括号前多了一个点。由于querySelector是一个函数，因此带有属性的括号直接在它后面，如下所示。

document.querySelector('.box').style.color = 'pink';

1.没有任何东西可以触发onclick事件。解决这个问题的最简单方法是向按钮添加onclick属性，如下所示：

<button class="pink" onclick="changeColor()">Pink</button>

我希望这能有所帮助。

赞(0）回复(0）举报 2023-05-21

我来回答

javascript Onclick函数错误，未定义函数

3条答案

相关问题

热门标签

最新问答