How to pass data from HTML to onClick js function? [duplicate]

Question

I want to send data to my recommend.js function from recommend.html

words_to_highlight is an array datatype

I am initializing and passing the function from main.py using FLASK

recommend.js

function highlightText(words_to_highlight) {
    console.log('button pressed');
    console.log(words_to_highlight);
}

recommend.html

<button 
    class="display-keywords" 
    onclick="highlightText({{words_to_highlight}})"
>
    Display keywords
</button>

main.py

@app.route("/recommend",methods=["POST"])
def recommend():
    words_to_highlight = [//some_data]
    .
    .
    .
    return render_template('recommend.html',words_to_highlight=words_to_highlight)

from the html file:

onclick="highlightText({{words_to_highlight}})"

this line does not send the variable words_to_highlight to my js file as the console.log() in js prints nothing to my console

onclick="highlightText({{words_to_highlight}}) so this line of code is not passing your words to highlight variable to your JavaScript file? — Winmari Manzano
– Winmari Manzano, Commented Apr 25, 2022 at 10:31
@WinmariManzano correct, it's not sending the variable to my js file — Omega
– Omega, Commented Apr 25, 2022 at 10:34
stackoverflow.com/questions/15321431/… this post have good answers especially the {{ your_variable | tojson }} — Winmari Manzano
– Winmari Manzano, Commented Apr 25, 2022 at 10:44

Blessing Ladejobi · Accepted Answer · 2022-04-25 10:35:15Z

1

You only need to make few corrections

function clickHandler(data){
  console.log(data) //This will log the data from html button
}

<button onclick="clickHandler('This is the data I want to pass')">click me</button>

applying that to your question now:

function highlightText(words_to_highlight) {
    console.log('button pressed');
    console.log(words_to_highlight);
}

<button 
    class="display-keywords" 
    onclick="highlightText('{{words_to_highlight}}')"
>
    Display keywords
</button>

Note, if the data you want to pass is not a string you need to pass it to the data type in your javascript.

answered Apr 25, 2022 at 10:35

Blessing Ladejobi

3492 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data from HTML to onClick js function? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related