Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Python Flask Basics Character Builder Starting the Builder

Yosef Fastow
Yosef Fastow
18,526 Points

Trouble making the bear background change color!

I'm following along the lesson in workspace in making builder but I can't get the background to change color. I did everything like Kennith Love did in the lesson but it still doesn't work. I checked and found nothing missing bur I might of missed something.

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                    <input type="radio" id="{{ color }}" name="colors" values"{{ color }}"
                        {% if saves.get('colors') == color %}checked{% endif %}>
                    <label for="{{ color }}"></label>
                {% endfor %}
                <button class="btn">Update</button>
            </div>
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}

[MOD: added jinja to markdown formatting -cf]

3 Answers

Chris Freeman
MOD
Chris Freeman
Treehouse Moderator 67,989 Points

Hi Yosef, it looks like you have typos in the use of saves.get('colors'). It should be the non-plural 'color'. Changing the two uses to:

saves.get('color')

should fix it. It is easily confused, since the options references the plural colors.

Post back if that wasn't the issue.

Yosef Fastow
Yosef Fastow
18,526 Points

Thanks! I tried that but it didn't help so I decided to delete all of the script that I added and start again and after that it worked. I still don't know what was wrong before. I had a similar problem earlier in the lesson on the my_app project that when I changed the css and javascript and pressed refresh it loaded the web without those changes. I sew in the community forum that others had that same problem and someone said just to refresh a few times and that worked. So maybe it was some type of bug or something like that.

Dylan Thunn
Dylan Thunn
22,658 Points

I'm having this same problem, but Kenneth literally says change it saves.get('colors') from saves.get('color')

I am also having issues with my code. Even if I add in saves.get('color') or saves.get('colors'), I'm always getting a window that says my workspace is unavailable.

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                    <input type="radio" id="{{ color }}" name="colors" values"{{ color }}"
                        {% if saves.get('colors') == color %}checked{% endif %}>
                    <label for="{{ color }}"></label>
                {% endfor %}
                <button class="btn">Update</button>
            </div>
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('colors') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}

I am having similar problem. Can you see anything wrong with my code?

{% extends "layout.html" %}

{% block content %}
<!--Build Area -->
<form action="{{ url_for('save') }}" method="POST" class="wrap no-top">
    <div class="grid-100 row">
        <div class="grid-30">
            <div class="title">
                <input type="text" name="name" value="{{ saves.get('name', '') }}">
            </div>
        </div>
        <div class="grid-70">
            <div class="colors">
              {% for color in options['colors'] %}
                <input type='radio' id="{{ color }}" name="colors" value'{{color}}'
                  {% if saves.get('color') == color %} checked {% endif%}>
                <label for="{{ color }}"></label>
              {% endfor %}
                  <button class="btn">Update</button>

            </div> 
        </div>
        <div id="bear" class="grid-100 bg-{{ saves.get('color') }}">
            <div class="bear-body"><img src="/static/img/bear_body.svg" /></div>
            <div class="head"><img src="/static/img/bear_face.svg" /></div>
            <div class="nose"><img src="/static/img/bear_nose.svg" /></div>
        </div>
        <div class="items">
        </div>
    </div>
</form>

{% endblock %}