#javascript
#javascript
Вопрос:
Я создаю свое первое приложение flask, которое представляет собой текстовое приключение и отдельный раздел для того, чтобы оставить отзыв. Я пытаюсь следовать текстовому приключенческому руководству. Однако, когда я обновляю страницу, чтобы увидеть свой прогресс, изменения в game.js не отражены, и я столкнулся с ошибкой в названии.
Это мой первый пост о переполнении стека, поэтому я поместил весь свой код ниже. Заранее спасибо за любую помощь! Я все еще относительно новичок, поэтому прошу прощения за любые глупые ошибки, Пэдди.
game.js
const textElement = document.getElementById('text')
const optionsButtonsElement = document.getElementById('options-buttons')
let state = {}
function startGame() {
state = {}
showTextNode(1)
}
function showTextNode(textNodeIndex) {
const textNode = textNodes.find(textNode => textNode.id === textNodeIndex)
textElement.innerText = textNode.text
while (optionsButtonsElement.firstChild)
optionsButtonsElement.removeChild(optionsButtonsElement.firstChild)
}
function selectOption(option) {
}
const textNodes = [
{
id:1
text: 'You wake up staring at the ceiling of your bunker.',
options [
{
text: 'Turn on the radio',
nextText: 2
},
{
text: 'Grab your pistol and pack up the remainder of your supplies.',
}
]
}
]
startGame()
game.html
{% block title %}Get ready to play!{% endblock %}
{% block content %}
<body>
<div class="container">
<div id="text">Text</div> <br/>
<div id="option-buttons" class="btn-grid">
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 1</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 2</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 3</button>
<button type="button" class="btn btn-outline-dark btn-lg btn-block">Option 4</button>
<script src="{{ url_for('static', filename='js/game.js')}}"></script>
</div>
</body>
{% endblock %}
app.py
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
from datetime import datetime
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///posts.db'
#Initialising the database
db = SQLAlchemy(app)
#Creating a database model
class Posts(db.Model):
id = db.Column(db.Integer, primary_key=True)
content = db.Column(db.String(200), nullable=False)
date_created = db.Column(db.DateTime, default=datetime.utcnow)
#Creating a function to return a string when a post is added to db
def __repr__(self):
return '<Content %r>' % self.id
@app.route('/')
def index():
return render_template("index.html")
@app.route('/game')
def game():
return render_template("game.html")
@app.route('/blog', methods=['POST', 'GET'])
def blog():
if request.method == "POST":
post_content = request.form['content']
new_post = Posts(content=post_content)
try: #Push the blog post to the db
db.session.add(new_post)
db.session.commit()
return redirect('/blog')
except:
return "There was an error adding your post"
else:
posts = Posts.query.order_by(Posts.date_created)
return render_template("blog.html", posts=posts)
@app.route('/update/<int:id>' , methods=['POST', 'GET'])
def update(id):
post_to_update = Posts.query.get_or_404(id)
if request.method == "POST":
post_to_update.content = request.form['content']
try:
db.session.commit()
return redirect('/blog')
except:
return "There was a problem updating your blog post"
else:
return render_template('update.html', post_to_update=post_to_update)
@app.route('/delete/<int:id>')
def delete(id):
post_to_delete = Posts.query.get_or_404(id)
try:
db.session.delete(post_to_delete)
db.session.commit()
return redirect('/blog')
except:
return "There was a problem deleting this post :("
мой base.html шаблон
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>
{% block title %}GEN TITLE{% endblock %}
</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('index')}}">Patricks Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('index')}}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('game')}}">Game</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('blog')}}">Blog</a>
</li>
</ul>
</div>
</nav>
</br>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
{% block content %}
{% endblock %}
</body>
</html>
Извините за стену текста, я не совсем был уверен, сколько я должен показать. Спасибо
Комментарии:
1. Вы пропускаете запятую после
id:1
вtextNodes
массиве в game.js
Ответ №1:
Ваша ошибка заключается в том , что вам нужно посмотреть на строку 25 из game.js
.
Похоже, вы пропускаете двоеточие в этой строке после options
и запятую после id: 1
. У вас есть:
const textNodes = [
{
id:1
text: 'You wake up staring at the ceiling of your bunker.',
options [...],
Вам нужно:
const textNodes = [
{
id:1,
text: 'You wake up staring at the ceiling of your bunker.',
options: [...],
Комментарии:
1. Спасибо, Роберт, я снова на ногах и снова в пути. Возникла проблема с тем, что Chrome не обновлял game.js файл с изменениями, но после очистки данных просмотра все, кажется, работает! 🙂
2. Рад это слышать! Если это ответило на ваш вопрос, пожалуйста, отметьте его как «принятый».