Ответ получен.
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, и она вызывает функции, которые перемешивают данные массива, в файле 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)
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();
}
EDIT
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>