I seem to be encountering a recurring issue with a jinja variable when trying to create an onclick function

Why do I keep encountering this error message: Uncaught SyntaxError: missing ) after argument list (at bestellen:60:105)

This is the HTML code causing the issue:

  <div class="gerechten">
    {% for gerecht in gerechten %}
    
    <div class="Gerechtdiv">
      <img src={{gerecht.url}} class="gerechtimg">
      <h3 class="GerechtTitel">{{gerecht.gerecht}}</h3>
      <p class ="GerechtBeschrijving">{{gerecht.beschrijving}}</p>
      <div class ="BottomGerechtDiv">
        <p style="font-size: 17px;"><b>€{{gerecht.prijs}}</b></p>
        <p>{{gerecht.sterren}}&#9733</p>
      </div>
      <button class="button" onclick="addItemToCart({{gerecht.gerecht}}, {{gerecht.prijs}})" style="cursor: pointer"><span>Add to Cart</span> </button>
    </div>
    
    {% endfor %}
  </div>

The error message specifically points to the line with the button element.

I attempted removing the onclick function, which resolved the error temporarily, but as soon as I reintroduce the function, the error reappears.

javascripthtmlcssjinja2flask-sqlalchemy

Answer №1

Perhaps there is a missing pair of curly brackets in {gerecht.prijs}. To fix this, you should write:

<button class="button" onclick="addItemToCart({{gerecht.gerecht}}, {{gerecht.prijs}})" style="cursor: pointer"><span>Add to Cart</span> </button>

Answer №2

Encountering a Javascript error is the issue at hand.

addItemToCart({{food.item}}, {{food.price}})

The key is to determine the values of food.item and food.price. If you mistakenly form your code as shown here:

addItemToCart(5, "a" b);

and experience the same problem, then this demonstrates where the error lies:

function addItemToCart() {} //mocking the function
addItemToCart(5, "a" b);
console.log(1);

Ultimately, it all comes down to the content within your template.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a Joomla extension available that can display or conceal content upon clicking?

Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...

phpjavascripthtmlcssjoomla

What is the best way to access the form button inside a div element?

Here is the code snippet for my form: <form accept-charset="utf-8" action="https:example.com" method="get" name="test"> <div class="classy"><input type="button" class="buttonE ...

javascriptphphtmljquerycss

Vue component with a variable number of rows, each containing a variable number of input fields

I am currently working on creating a form that can have a variable number of steps. Users should be able to add an additional step by clicking a button. Each step will contain some input fields and buttons to dynamically create more input fields. For inst ...

javascriptvue.jsvuejs2

Styling your printed documents in Next.js 10

Within my Next 10 application, I am able to bring in global styles by importing them in _app.js in the following manner: import 'assets/css/app.css' I want to incorporate a print stylesheet as well. Instead of using a @media print { } query with ...

cssnext.jsprint-style

I am facing an issue with updating the state dynamically within a useState object

Within my useState, there is an object containing a variety of values. I have an input field and am dynamically setting its value to useState[key], which works fine. However, the issue arises when I try to update these values. When I call onChange and use ...

javascriptreactjsobjectstate

Why doesn't WebStorm display TypeScript inspection errors in real-time?

I'm currently utilizing WebStorm 2017.2.4 in conjunction with Angular 4.3 - I am facing an issue where TypeScript errors are not being displayed: https://i.sstatic.net/pcLQX.png Query How can I enable real-time inspections to occur immediately? (I ...

javascriptangulartypescriptwebstorm

Understanding Three.js Fundamentals: Resolving GLTFLoader Animation and Variable Not Found Issues

My understanding of JS is very basic. After exploring the three.js docs on Loading 3D models, I managed to successfully render a 3D object and center it: const loader = new GLTFLoader(); loader.load( 'Duck.gltf', function ( duck ) { con ...

javascriptanimationthree.jsgltf

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

htmlcss

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Can the "Another app is displaying over chrome error" be bypassed using JavaScript or TypeScript? Error Message: https://i.stack.imgur.com/iSEuk.png ...

javascriptandroidtypescriptgoogle-chrome

Profound comprehension: What is the fundamental reasoning behind the functionality of array indexing?

Questioning the Logic Behind Array Indexing When delving into the world of programming, there is a certain excitement that comes with truly grasping the logic behind a language. The ability to navigate and problem-solve based on that logic is rewarding. H ...

javascriptarraysindexingstring-length

Displaying the server's feedback upon successfully uploading a file onto the server

I am utilizing an HTML5 input control that allows users to upload a .csv file: <input id="ImportFile" type="file" name="ImportFile" data-val="true" data-val-required="Please select a file" title="Browse for a file to upload" /> This input control i ...

javascriptjqueryhtmlforms

PHP-generated HTML onclick attribute malfunctioning

Here is the PHP code I am currently working with: $listing .= "<button onclick='updateValue(".$id.", ".$key.")'>change value</button>"; The variable $id is an integer and functions correctly. However, $key is a reference from a for ...

javascriptphphtml

How to position two divs next to each other using CSS with just one adjustment

Is it possible to position two divs side by side, with one of them moving continuously up and down while containing an image? I attempted the following code: <div> <div style="margin:30px;width:100px;height:250px;position:relative;float:left; ...

htmlcssmove

Expression enclosed in double quotes within a JavaScript string

Our company has encountered an issue with an FTL that involves a link with JavaScript functionality. The problem arises when the value contains an apostrophe, causing the link to break. To address this, we utilized the js_string method to solve the issue. ...

javascriptjsonescapingfreemarker

Using Bootstrap Select with a callback function

I am currently working with 2 Bootstrap Select dropdowns. One dropdown contains a list of countries, while the other contains a list of states. The country list is static and loads when the page is loaded. On the other hand, the state list is populated dyn ...

javascriptjqueryajaxbootstrap-select

Implementing Angular checkbox repetition controlled from an external controller

I'm looking to streamline my controller by setting a variable from outside the controller to populate my checkbox list. Can this be done? Check out my current code snippet here: http://jsfiddle.net/ilmansg/Lx37kr3e/1/ VIEW HTML <div ng-controlle ...

javascriptangularjscheckboxangularjs-ng-repeat

Difference among rows

I am currently working on a table design with 2 rows that have different colors. There seems to be some space between the two rows and I am looking for a way to eliminate that gap. Can anyone provide me with a solution? https://i.stack.imgur.com/8N8Rw.png ...

htmlhtml-table

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

Looking to craft a regex that can identify all periods not enclosed in quotes and not followed by a '<'. This is for the purpose of converting text into ssml (Speech Synthesis Markup Language). The regex will be utilized to automatically inse ...

javascriptregex

The index.html file is failing to load/render when using app.js

I am currently in the process of creating a to-do list using an older tutorial. The app.js file seems to be functioning properly, however, when I try to run it locally, all I see is a blank page instead of my HTML content. Here is the code found in the ap ...

javascriptexpress

Unlocking the power of AngularJS scopes

I am currently in the learning stages of AngularJS and am working on a personal project that involves fetching JSON data and displaying it on an HTML page using AngularJS. The main objective is to have two columns, "rules" and "servername", with checkbox i ...

javascriptjqueryhtmlangularjs