0

What is the simplest way to change class name form .black to .white in the example below using python and flask framework? For example: after mouse click on div #area ?

CSS file:

#area {position:absolute;width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}

HTML file:

<!doctype html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='style.css')}}">
    </head>
    <body>
    <div id="area" class="black"></div>
    </body>
</html>
3
  • 1
    I think .toggleClass() is the easiest way to go. See here or here. If you use jquery then look here.
    – Detlef
    Feb 14, 2021 at 21:12
  • 1
    you have to use JavaScript for this - and it is not part of Flask
    – furas
    Feb 14, 2021 at 23:29
  • I remembered a not very popular method: you can write some code in Python and use transcrypt to convert it to JavaScript which can run in web browser. OR you can load JavaScript library brython which can run some Python code in browser. But usually people prefer to use directly JavaScript.
    – furas
    Feb 15, 2021 at 3:52

4 Answers 4

1

This need JavaScript and it has nothing to do with Flask

Example using querySelector()

<div id="area" class="black" onclick="change();"></div>

<script>
area = document.querySelector('#area');

function change(){
    area.classList.replace('black', 'white');
}
</script>

or using special variable this

<div id="area" class="black" onclick="change(this);"></div>

<script>
function change(item){
    item.classList.replace('black', 'white');
}
</script>

Eventually you could use addEventListener instead of onclick

<div id="area" class="black"></div>

<script>
function change(){
    this.classList.replace('black', 'white');
}

area = document.querySelector('#area');
area.addEventListener('click', change);
</script>

or shorter

<div id="area" class="black"></div>

<script>
area = document.querySelector('#area');
area.addEventListener('click', function(){
    this.classList.replace('black', 'white');
});
</script>

or even little shorter

<div id="area" class="black"></div>

<script>
document.querySelector('#area').addEventListener('click', function(){
    this.classList.replace('black', 'white');
});
</script>

Minimal working code:

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>

<style>
#area1 {width:100px;height:100px;}
#area2 {width:100px;height:100px;}
#area3 {width:100px;height:100px;}
#area4 {width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}
</style>
</head>

<body>
    <div id="area1" class="black" onclick="change1();"></div>
<br>
    <div id="area2" class="black" onclick="change2(this);"></div>
<br>
    <div id="area3" class="black"></div>
<br>
    <div id="area4" class="black"></div>

<script>
area1 = document.querySelector('#area1');

function change1(){
    area1.classList.replace('black', 'white');
    console.log('change1');
}

function change2(item){
    item.classList.replace('black', 'white');
    console.log('change2');
}

function change3(){
    this.classList.replace('black', 'white');
    console.log('change3');
}

area3 = document.querySelector('#area3');
area3.addEventListener('click', change3);

area4 = document.querySelector('#area4');
area4.addEventListener('click', function(){
    this.classList.replace('black', 'white');
    console.log('change4');
});

</script>

</body>

</html>
0

Using Python you would have to use <a></a> which would send information to server when you click it. And server would use Python to generate HTML with new class and send it back to browser. But it means to reload all page and it needs time.


Minimal working code:

I put black area in <a></a> which ?color=white and when server gets it then it sends back HTML with white area and with ?color=black, etc.

from flask import Flask, request, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    color = request.args.get('color', 'black')
    if color == 'black':
        other = 'white'
    else:    
        other = 'black'

    return render_template_string('''    
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>

<style>
#area {width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}
</style>
</head>

<body>
    <a href="/?color={{ other }}"><div id="area" class="{{ color }}"></div></a>
</body>

</html>''', color=color, other=other)

if __name__ == '__main__':
    app.run()
0

It is not popular but you can load JavaScript module Brython to run some Python code in web browser. But you can uses only modules converted to JavaScript

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>

<style>
#area {width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>

</head>

<body onload="brython()">

    <div id="area" class="black"></div>

<script type="text/python">

from browser import document

def change(ev):
    if document['area'].attrs['class'] == 'black':
        document['area'].attrs['class'] = 'white'
    else:
        document['area'].attrs['class'] = 'black'

document["area"].bind("click", change)

</script>
</body>

</html>

There is also transcrypt which can convert some Python code to JavaScript code and run in web browser.

Similar module RapydScript

-1

Thanks, but it must be Python. I have found solution for printing a list, for example: If I create a list called 'content'=['white','black'] the code below will print: white black and it works fine.

<!doctype html>
<html>
<head>


    <link rel="stylesheet" href="{{ url_for('static',filename='style.css')}}">
    </head>
    <body>


    {% for x in content %}

      {{x}}

    {% endfor %}

  </body>
</html>

So according to my question the code below should also work:

<!doctype html>
<html>
<head>

    <link rel="stylesheet" href="{{ url_for('static',filename='style.css')}}">
    </head>
    <body>

    {% if x==1 %}
        <div id="area" class="white"></div>
    {% else %}
        <div id="area" class="black"></div>
    {% endif %}

  </body>
</html>

But it doesn't, any ideas?

5
  • What's the value of x here? In your loop you assign x in the for loop based on content. If x exists, wouldn't the value be either white or black?
    – Phix
    Feb 15, 2021 at 0:32
  • No, this is another example,you can assume that x is equal to 1. Anyway it doesnt matter, if x is equal to 'white' or 'black' the 'else' statment should work either. Feb 15, 2021 at 0:40
  • if this is not solution for your problem then don't put it as asnwer but add it to question.
    – furas
    Feb 15, 2021 at 3:07
  • 1
    you can't change class on click using Python - Python generates this HTML before sending to browser but click works in browser. You would have to use links which send information to server and it uses Python to generate new HTML and send new HTML to browser - but it meas reloading all HTML in browser - like loading new page.
    – furas
    Feb 15, 2021 at 3:09
  • code in {% %} is part of template system Jinja and it is executed on server, not in browser, and it generates HTML which is send from server to browser.
    – furas
    Feb 15, 2021 at 3:48

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.