Question

我试图传达这样的信息＆＃34;父母已被警告＆＃34;单击按钮时显示在窗口警告屏幕中，但到目前为止我无法显示该消息。

JS：

var thirtyMinDelayButton = document.querySelector("30-minute-delayed-button");
var hourDelayButton = document.querySelector("hour-delayed-button");
var cancelledButton = document.querySelector("cancelled-button");

/*
 * event listeners
 */
thirtyMinDelayButton.onclick = function() {
  window.alert("Parents have been alerted");
};

HTML：

 <article id="contentstart">
      <h2>Football</h2>
      <p>Click a button below to update the schedule.</p>
      <div class="changes">
        <p class="30-minute-delayed-button">30 Minute Delay</p>
        <p class="hour-delayed-button">hour Delay</p>
        <p class="cancelled-button">Cancelled</p>
      </div>
    </article>

为什么这条消息没有显示，因为根据我对JS的理解，它应该有效。

Answer 1

var thirtyMinDelayButton = document.querySelector(".30-minute-delayed-button");

我快速浏览了一下Document.queryselector Mozilla开发者网站，看起来不错，我能看到的只是课程名称之前的一段时间？

Mozilla Developer Site - QuerySelector

Answer 2

如果您想对这些元素执行任何操作：

var thirtyMinDelayButton = document.querySelector("30-minute-delayed-button");
var hourDelayButton = document.querySelector("hour-delayed-button");
var cancelledButton = document.querySelector("cancelled-button");

然后将它们更改为：

var thirtyMinDelayButton = document.querySelector(".30-minute-delayed-button");
var hourDelayButton = document.querySelector(".hour-delayed-button");
var cancelledButton = document.querySelector(".cancelled-button");

它们是CSS选择器，因此在使用document.querySelector

时需要在类名前面有一段句子。

单击按钮时window.alert没有运行

2 个答案: