javascript - Javascript 中的 click 函数出现错误

Question

我正在构建一个应用程序，该应用程序会获取成绩，然后给出平均值。它还具有一个排序按钮，以便您可以按输入的学生的姓氏进行排序，以及一个清除按钮，用于清除显示数组中的当前值。这是我到目前为止的 javascript 文件代码:

var $ = function (id) {return document.getElementById(id);}
"use strict";

var scoreArray = [];
var dispArray = []; 

var displayScores = function () {
var totalScore = 0;
var numberOfScores = 0;
var averageScore = 0;

numberOfScores = scoreArray.length;

//loop to find the total score 
for (var i=0;i<numberOfScores;i++)
{
totalScore = totalScore + scoreArray[i];
}

//find the average 
averageScore = totalScore/numberOfScores;

var st="";

//put the string in the display array
for(var i=0; i<numberOfScores;i++)
{
st += (dispArray[i]+"\n");
}

//display the average score 
$("#average_score").val(averageScore.toString());

$("#scores").val(st);
};


$("#add_button").click(function(){
var scoreNumber = parseInt( $("#score").val());
var scoreString = $("#last_name").val() + ", " + $("first_name").val() + ": " + $("#score").val();

scoreArray.push(scoreNumber);

dispArray.push(scoreString);

displayScores();

//reset the values 
$("#first_name").val("");
$("#last_name").val("");
$("#score").val("");
$("#first_name").focus();

});

//function to clear the contents of the form
$("#clear_button").click(function(){

//empty the arrays 
scoreArray=[];
dispArray=[];

//reset the values in the form 
$("#scores").val("");
$("#first_name").val("");
$("#last_name").val("");
$("average_score").val("");
$("#score").val("");

});

//function to sort the scores based on the last name that was entered
$("#sort_button").click(function(){
var mylen = scoreArray.length;

//sorting
for(var kk=0;kk<mylen;kk++)
{
    for(var aa = 1; aa<(mylen-kk);aa++)
    {
        var xp1 = dispArray[aa-1].split(" ");
        var lname1 = xp1[0];
        lname1 = lname1.slice(0, -1);

        var xp2 = dispArray[aa].split(" ");
        var lname2 = xp2[0];
        lname2 = lname2.slice(0, -1);

        if (lname1 > lname2){
            var tp1 = scoreArray[aa];
            scoreArray[aa]=scoreArray[aa-1];
            scoreArray[aa-1] = tp1;

            var tp2 = dispArray[aa];
            dispArray[aa]=dispArray[aa-1];
            dispArray[aa-1] = tp2;
        }
    }
}

//display the scores 
$("#scores").val("");
var st=" ";
for(var i=0;i<dispArray.length;i++)
{
    st += (dispArray[i]+"\n");
}

//display the sorted scores 
$("scores").val(st);
});

$("#first_name").focus();

它给出错误:未捕获类型错误:无法读取 null 的属性“单击” 在 Scores.js:38

第38行是添加按钮的click函数，将分数添加到显示数组中:$("#add_button").click(function(){

对此有什么想法吗？

Answer 1

发生这种情况是因为您将 $ 定义为返回 document.getElementById() 结果的函数。

您没有考虑到如果此操作找不到元素会发生什么，在这种情况下它返回 null，并且没有 .click() 方法null。

简而言之:您的选择器#add_button 似乎没有找到预期的元素。因此，在运行该行之前，请检查您的 DOM 以及元素是否存在。 始终怀疑你的选择者。或者构建一个检查，仅在成功找到元素后才转到 .click()。

let el = $('#add_button');
if (el) el.click(...);