Неперехваченная синтаксическая ошибка: неожиданный идентификатор game.js:25

#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. Рад это слышать! Если это ответило на ваш вопрос, пожалуйста, отметьте его как «принятый».