时间戳

首页 > 解决方案 > jQuery .click(function(){}“错误：无法读取未定义的属性‘长度’”

javascript - jQuery .click(function(){}“错误：无法读取未定义的属性‘长度’”

问题描述

已经回答了。

javascript.js

var jQuery     = require('jquery');
var $ = jQuery = require('jquery')(window);

var cardsArr;

function init(){
 cardsArr = [
 'cards/2.png',
 'cards/3.png',
 'cards/4.png',
 'cards/5.png',
 'cards/6.png',
 'cards/7.png',
 'cards/8.png',
 'cards/9.png',
 'cards/10.png',
 'cards/J.png',
 'cards/Q.png',
 'cards/K.png',
 'cards/A.png'
 ];
}

function cardMath(){
 var oneCard = cardsArr[(Math.random() * cardsArr.length)|0];
 return oneCard;
};

function singleCard(){
 $("#singleCard").remove();
 $("#single").append($('<div id="singleCard"><img class="rounded" src="/' + 
 cardMath() + '"/></div>').hide().fadeIn(750));
}

头文件.ejs

<body onLoad="init()">

我创建了一个洗牌器按钮，单击该按钮时，将加载本地卡片图像并显示它。该按钮附加了一个 jQuery click 函数，它调用了 javascript.js 文件中的函数，这些函数对数组数据进行了洗牌。似乎点击函数没有读取卡片数组，因此“cardsArr.length”出现为“长度”未定义。

javascript.js:38 Uncaught TypeError: Cannot read property 'length' of undefined
 at cardMath (javascript.js:38)
 at HTMLButtonElement.<anonymous> ((index):45)
 at HTMLButtonElement.dispatch (jquery-3.3.1.min.js:2)
 at HTMLButtonElement.y.handle (jquery-3.3.1.min.js:2)

索引.ejs

<% include ./partials/header %>
<div class="container">
        <div class="jumbotron">
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <button name="oneCard" id="oneCard" class="btn btn-lg btn-primary btn-block" placeholder="One Card">
                        Random Card</button>
                        <script>
                            $("#oneCard").click(function(){
                                return singleCard();
                            });
                        </script>
                </div>
                <div class="col-lg-4 col-sm-6">
                </div>
                <div class="col-lg-4 col-sm-6" id="multiple">
                </div>
            </div>
            <div class="row multiple" id="secondRow">
                <div class="col-lg-4 col-sm-6">
                </div>
                <div class="col-lg-4 col-sm-6" id="single">
                </div>
                <div class="col-lg-4 col-sm-6">
                </div>
            </div>
        </div>
    </div>
<% include ./partials/footer %>

然而，如果我将 javascript.js 代码复制并粘贴到 Chrome 控制台并运行 cardOutput()，它将成功读取数组，因此图像将加载并且按钮在单击时将起作用，至少在页面刷新之前。我该如何解决？

javascript.js

var express    = require('express'),
jQuery     = require('jquery'),
bodyParser = require("body-parser");

var $ = jQuery = require('jquery')(window);

var cardsArr =
 [
 'cards/2.png',
 'cards/3.png',
 'cards/4.png',
 'cards/5.png',
 'cards/6.png',
 'cards/7.png',
 'cards/8.png',
 'cards/9.png',
 'cards/10.png',
 'cards/J.png',
 'cards/Q.png',
 'cards/K.png',
 'cards/A.png'
 ];

function cardMath(){
 var oneCard = cardsArr[(Math.random() * cardsArr.length)|0];
 return oneCard;
};

function singleCard(){
 if(document.getElementById("singleCard") === true && 
 document.getElementsByClassName("shuffledCards") === true){
    $("#single").append($('<div id="singleCard"><img class="rounded" src="/'+ cardMath() + '"/></div>').hide().fadeIn(750));
} else {
    $("#singleCard").remove();
    $("#single").append($('<div id="singleCard"><img class="rounded" src="/' + cardMath() + '"/></div>').hide().fadeIn(750));
 }
}

function cardOutput(){
 singleCard();
}

编辑

头文件.ejs

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" text="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384- 
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" 
crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="/stylesheets/landing.css">
    <script
        type="text/javascript"
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="/stylesheets/javascript.js"> </script>
</head>
<body>

标签： javascriptjquerynode.jstwitter-bootstrap-3

解决方案

推荐阅读