Question

已回答。

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));
}

header.ejs

<body onLoad="init()">

我创建了一个卡片洗牌按钮，单击该按钮将加载并显示本地卡片图像。该按钮附加了jQuery click函数，并调用该函数，从而在javascript.js文件中对数组数据进行混洗。似乎单击功能无法读取cards数组，因此“ cardsArr.length”显示为“ 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)

index.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();
}

编辑

header.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>

jQuery .click（function（）{}“错误：无法读取未定义的属性'length'”

已回答。

0 个答案: