Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python

Posted by Mikael Enarsson
Mikael Enarsson
7,056 Points

Radio buttons don't appear

For some reason the radio buttons won't appear at the top of the window. Or, one does, but I can't select it, so I don't think that it counts. If anyone can see the problems in my code, I would be really grateful!

builder.html

{% 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('colors') == color %}checked{% endif %}>
                {% endfor %}
                <label for="{{ color }}"></label>
                <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 %}

index.html

{% extends "layout.html" %}
{% block content %}
<!--Enter Name -->
<div class="enter-name">
    <div class="grid-100">
        <img src="/static/img/bear_avatar.svg" class="bear-avatar" />
    </div>
    <div class="grid-100">
        <form action="{{ url_for('save') }}" method="POST">
            <label>Name your bear</label>
            <input type="text" name="name" value="{{ saves.get('name', '') }}" autofocus>
            <input type="submit" value="Let's build it!">
        </form>
    </div>
</div>
{% endblock %}

app.py

import json

from flask import Flask, render_template, redirect, url_for, request, make_response

from options import DEFAULTS

app = Flask(__name__)

def get_saved_data():
    try:
        data = json.loads(request.cookies.get("character"))
    except TypeError:
        data = {}
    return data


@app.route('/')
def index():
    data = get_saved_data()
    return render_template("index.html", saves = data)

@app.route("/builder")
def builder():
    return render_template("builder.html", saves=get_saved_data(), options = DEFAULTS)

@app.route("/save", methods = ["POST"])
def save():
    response = make_response(redirect(url_for("builder")))
    data = get_saved_data()
    data.update(dict(request.form.items()))
    response.set_cookie("character", json.dumps(data))
    return response

app.run(debug=True, host="0.0.0.0", port=8000)

2 Answers

Mikael Enarsson
Mikael Enarsson
7,056 Points

Got it! It turned out that I had placed the label tags outside of the loop, like so

   {% for color in options["colors"] %}
      <input type="radio" id="{{ color }}" name="colors"
         value="{{ color }}" {% if saves.get('colors') == color %}checked{% endif %}>
   {% endfor %}
<label for="{{ color }}"></label>

Moving it into the loop fixed the problem ^^

Kenneth Love
Kenneth Love
Treehouse Guest Teacher
Kenneth Love
Kenneth Love
Treehouse Guest Teacher

Ah! Can't believe I didn't see that! Good job figuring it out.

Mikael Enarsson
Mikael Enarsson
7,056 Points

Thank you! It was quite satisfying! Best way to learn, right? XD Edit: Also, I had some problem with the other <input> problem, but it was just an <input id>/<label for> disagreement. Anyone who reads this, beware of mismatched dashes/underscores! It's as easy as slipping on the shift key!

Kenneth Love
STAFF
Kenneth Love
Treehouse Guest Teacher
Kenneth Love
Kenneth Love
Treehouse Guest Teacher

Hmm. This is what I have:

<div class="grid-70">
            <div class="colors">
                {% for color in options['colors'] %}
                    <input type="radio" id="{{ color }}" name="colors" value="{{ color }}"
                        {% if saves.get('colors') == color %}checked{% endif %}>
                    <label for="{{ color }}"></label>
                {% endfor %}
                <button class="btn">Update</button>
            </div>
        </div>

Which looks like what you have at first glance. If you use your browser's dev tools to inspect the .colors div, are the inputs there?

Mikael Enarsson
Mikael Enarsson
7,056 Points

Yes, it appears so, but the attributes appear in a different order than they are in the loop. They also appear to have acquired a closing tag somewhere along the way. Is that normal?

<input id="black" name="colors" value="black" type="radio"></input>
Kenneth Love
Kenneth Love
Treehouse Guest Teacher
Kenneth Love
Kenneth Love
Treehouse Guest Teacher

Attribute order doesn't matter. The closing </input> tag is weird but shouldn't affect anything.