时间戳

首页 > 解决方案 > 解决此错误的更好方法是什么？

javascript - 解决此错误的更好方法是什么？

问题描述

我正在阅读 JavaScript 教程。随着我的继续，我决定制作一个 Flash Cards 形状的网页，以总结和实践 JS 概念。每个 JS 概念都有自己的 HTML 页面和各自的闪存卡，但是，我不想为每个脚本创建单独的 JS 页面，所以我只有一个“main.js”，并创建了一些“onclick”每个闪存卡的事件函数应该在单击时显示汇总信息并演示该 JS 概念的作用。

然而，当我制作我的第二个 HTML 页面并编写脚本时，我偶然发现了这个错误：Cannot set property 'onclick' of null 经过一番研究，我发现这是我的第一个 HTML 页面中的 JS 脚本和第二个页面中的某种冲突。我实际上并不完全理解这个错误背后发生了什么，因为我认为我的函数没有被称为自动，你必须点击卡片才能运行，所以我不知道为什么函数返回“null” .

但无论如何，我能够通过将所有函数包装在 a 中来找到解决方法，If ("code" !== null)但我想知道是否有更好、更有效的方法来做到这一点，这是完整的代码：

// UI Functions

if (document.querySelector("#alert") && document.querySelector("#prompt") && document.querySelector("#confirm") !== null) {
  document.querySelector("#alert").onclick = function() {
    window.alert(`Message`);
  }

  document.querySelector("#prompt").onclick = function() {
    window.prompt(`What's your name?`, `What's your name?`);
  }

  document.querySelector("#confirm").onclick = function() {
    window.confirm(`Do you like learning JavaScript?`);
  }
}

// If-Else

if (document.querySelector("#ifelse") !== null) {
  document.querySelector("#ifelse").onclick = function() {
    const age = window.prompt(`How old are you?`);

    if (age < 3) {
      window.alert(`Hi, baby! Your age is ${age}`);
    } else if (age < 18) {
      window.alert(`Hello! Your age is ${age}`);
    } else if (age < 100) {
      window.alert(`Greetings! Your age is ${age}`);
    }
    else {
      window.alert(`What an unusual age! Your age is ${age}`);
    }
  }
}

标签： javascript

解决方案

我实际上并不完全理解这个错误背后发生了什么，因为我认为我的函数没有被称为自动，你必须点击卡片才能运行，所以我不知道为什么函数返回“null” .

该错误实际上与这些功能无关。

您的代码显示“获取此元素。当有人单击它时，运行此函数”。

由于该元素不存在，因此发生的情况如下：

代码：获取此元素

浏览器：找不到

代码：现在，当它被点击时……</p>

浏览器什么时候点击？我只是说我找不到。

但无论如何，我能够通过将所有函数包装在 If ("code" !== null)

您只是将第三个与 null 进行比较，其他您只是在测试其真实性。

但我想知道是否有更好更有效的方法来做到这一点

不是很大。

您可以将结果分配querySelector给变量，然后将这些变量用于测试和分配。

你可以跳过null最后一个的比较，也可以在那里使用真实性测试。

推荐阅读