Search code examples
javascripthtmljinja2

Changing color permanently in a submit button does not work

I have this HTML code using jinja template:

<!doctype html>
<html>
<!-- <link rel="stylesheet" href="backup-styles.css"> -->
   <body>
         <h3>Select the devices to push to</h3> 
         {% for question in questions %}
            {% set foo = "hostname" %}
            <form method="POST" action="/questions">  
               <!-- <input type="checkbox" value="{{question[foo]}}" name="a"> -->
               <input id="{{question[foo]}}" class="btn btn-default" onclick="document.getElementById('priceform').submit()" onmousedown="change(this.id)" type="submit" value="{{question[foo]}}" name="a"> 
               
            </form>
            
            <br>
         {% endfor %}

         <script type="text/javascript"> 
            function change(id){
                  localStorage.setItem("background","#7CFC00");
                  document.cookie = '#7CFC00'
                  document.getElementById(id).style.background = localStorage.getItem("background");
           }
         </script>

         <form method="POST">
            <textarea name="textarea" style="width:250px;height:150px;"></textarea>   
            <input type="submit" value="submit" name="submit"> 
         </form>

         <pre> {{ content }} <pre>

   </body>
</html>

I have used the Javascript to change the submit button color, but I want it to stay the same color permanently after the click and only return to normal on refresh or click through some another button. I even tried using cookie and local storage as shown in the code above. Is it because of the for loop?

Solution

  • Are you sure your framework isn't running a script in the background that changes or overrides your button's style?

    You could try a couple of things:

    1. define a new class for the button color in CSS (e.g call it "btn-selected") and set that class instead of setting button.style.background

    2. put the button tag inside a {% block %} ... {% endblock %} declaration, as that should stop jinja from overriding the button, if that's what's actually happening.