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

Answer 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.