0
Ich versuche, einige Informationen von einem Objekt an eine div anhängen.
Ich habe versucht, $(function() {...}), document.addEventListener("DOMContentLoaded", function() {...}) und window.onload = function() {...} zu meiner JavaScript-Datei zu verwenden, aber keiner von ihnen funktioniert, da '$', 'Dokument' und 'Fenster' nicht definiert sind, aber definiert sind, wenn ich mein Projekt im Browser öffne (getestet mit der Konsole).
Jedes Mal, Stern, den ich ein neues Projekt, das ich mit der folgenden HTML-Start:
<head>
<title>...</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="script.js"></script>
</body>
und alles funktioniert. Ich habe sichergestellt, dass der Dateipfad korrekt ist (die Dateien befinden sich im selben Ordner).
Hier ist mein Projekt, falls ich etwas verpasst:
$(function() {
var streamers = [
{
"stream": {
"mature": false,
"status": "Greg working on Electron-Vue boilerplate w/ Akira #programming #vuejs #electron",
"broadcaster_language": "en",
"display_name": "FreeCodeCamp",
"game": "Creative",
"language": "en",
"_id": 79776140,
"name": "freecodecamp",
"created_at": "2015-01-14T03:36:47Z",
"updated_at": "2016-09-17T05:00:52Z",
"delay": null,
"logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png",
"banner": null,
"video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-channel_offline_image-b8e133c78cd51cb0-1920x1080.png",
"background": null,
"profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_banner-6f5e3445ff474aec-480.png",
"profile_banner_background_color": null,
"partner": false,
"url": "https://www.twitch.tv/freecodecamp",
"views": 161989,
"followers": 10048,
"_links": {
"self": "https://api.twitch.tv/kraken/channels/freecodecamp",
"follows": "https://api.twitch.tv/kraken/channels/freecodecamp/follows",
"commercial": "https://api.twitch.tv/kraken/channels/freecodecamp/commercial",
"stream_key": "https://api.twitch.tv/kraken/channels/freecodecamp/stream_key",
"chat": "https://api.twitch.tv/kraken/chat/freecodecamp",
"subscriptions": "https://api.twitch.tv/kraken/channels/freecodecamp/subscriptions",
"editors": "https://api.twitch.tv/kraken/channels/freecodecamp/editors",
"teams": "https://api.twitch.tv/kraken/channels/freecodecamp/teams",
"videos": "https://api.twitch.tv/kraken/channels/freecodecamp/videos"
}
},
"_links": {
"self": "https://api.twitch.tv/kraken/streams/freecodecamp",
"channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
}
},
{
"stream": null,
"display_name": "OgamingSC2",
"_links": {
"self": "https://api.twitch.tv/kraken/streams/ogamingsc2",
"channel": "https://api.twitch.tv/kraken/channels/ogamingsc2"
}
},
{
"stream": {
"mature": false,
"status": "RERUN: StarCraft 2 - Kane vs. HuK (ZvP) - WCS Season 3 Challenger AM - Match 4",
"broadcaster_language": "en",
"display_name": "ESL_SC2",
"game": "StarCraft II",
"language": "en",
"_id": 30220059,
"name": "esl_sc2",
"created_at": "2012-05-02T09:59:20Z",
"updated_at": "2016-09-17T06:02:57Z",
"delay": null,
"logo": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
"banner": null,
"video_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-channel_offline_image-5a8657f8393c9d85-1920x1080.jpeg",
"background": null,
"profile_banner": "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_banner-f8295b33d1846e75-480.jpeg",
"profile_banner_background_color": "#050506",
"partner": true,
"url": "https://www.twitch.tv/esl_sc2",
"views": 60843789,
"followers": 135275,
"_links": {
"self": "https://api.twitch.tv/kraken/channels/esl_sc2",
"follows": "https://api.twitch.tv/kraken/channels/esl_sc2/follows",
"commercial": "https://api.twitch.tv/kraken/channels/esl_sc2/commercial",
"stream_key": "https://api.twitch.tv/kraken/channels/esl_sc2/stream_key",
"chat": "https://api.twitch.tv/kraken/chat/esl_sc2",
"subscriptions": "https://api.twitch.tv/kraken/channels/esl_sc2/subscriptions",
"editors": "https://api.twitch.tv/kraken/channels/esl_sc2/editors",
"teams": "https://api.twitch.tv/kraken/channels/esl_sc2/teams",
"videos": "https://api.twitch.tv/kraken/channels/esl_sc2/videos"
}
},
"_links": {
"self": "https://api.twitch.tv/kraken/streams/esl_sc2",
"channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
}
},
{
"stream": null,
"display_name": "noobs2ninjas",
"_links": {
"self": "https://api.twitch.tv/kraken/streams/esl_sc2",
"channel": "https://api.twitch.tv/kraken/channels/esl_sc2"
}
},
{
"error": "Not Found",
"status": 404,
"message": "Channel 'not-a-valid-account' does not exist"
}
];
const all = $('.nav li:nth-child(1)');
const online = $('.nav li:nth-child(2)');
const offline = $('.nav li:nth-child(3)');
const cont = $('#body');
const rows = '<div class="row">' + '<div class="col-md-4"></div> <div class="col-md-8"></div>' + '</div>';
var statusAll;
var statusOnline;
var statusOffline;
all.on('click', function() {
cont.html('');
statusAll = streamers.filter(function (val) {
return val;
});
/*statusOnline = streamers.filter(function(val) {
return val.stream !== null && val.error !== "Not Found";
});
statusOffline = streamers.filter(function(val) {
return val.stream === null || val.error === "Not Found";
});*/
for (var i = 0; i < statusAll.length; i++) {
cont.append(rows);
$('.row:nth-last-child(1) .col-md-4').append('<img class="img-responsive img-circle" src="' + statusAll[i].stream.logo + '">');
$('.row:nth-last-child(1) .col-md-8').append('<p>' + statusAll[i].stream.display_name + '</p>');
}
});
});#channels-cont {
width: 360px;
height: 500px;
margin: 100px auto;
background: white;
box-shadow: 2px 2px 0px black;
}
ul {
width: 100%;
}
li {
margin: 0 auto;
width: 33.3334%;
text-align: center;
font-size: 19px;
background: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>My TwitchTV</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/slate/bootstrap.min.css" rel="stylesheet" integrity="sha384-RpX8okQqCyUNG7PlOYNybyJXYTtGQH+7rIKiVvg1DLg6jahLEk47VvpUyS+E2/uJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div id='channels-cont'>
<div id="header">
<ul class="nav navbar-nav">
<li><a href="#">All</a></li>
<li><a href="#">Online</a></li>
<li><a href="#">Offline</a></li>
</ul>
</div>
<div id="body"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
es funktioniert, wenn Sie es öffnen in Der Browser funktioniert aber nicht, wenn Sie ihn öffnen ... wo? – amenadiel
@amenadiel funktioniert nicht, wenn ich mit der Seite interagiere. –