I am creating a gift exchange game and following along a video about live methods so that I can try and create the wage bidding auction, but I cannot figure out what is going wrong with my script. Essentially, the HTML blocks are not having their display styles set to "block" from "none." I am using oTree Studio.

I have:

<div id="wage_offer" style="display: none">
        You have an endowment of 126 ECUs. <br>
        Please make a wage offer. <br>
        <input id="wage_offer_input">
        <button type="button" onclick="wage_offer()">Make Wage Offer</button>        
    </div>
<div id="wage_accept" style="display: none">
        You have a cost of working of 26, plus a cost of effort described in the table below. <br>
        Please accept a wage offer. <br>
        <input id="wage_accept_input">
        <button type="button" onclick="wage_accept()">Accept Wage Offer</button>        
    </div>
...   
<script>
    {% if player.type == 0 %} 
        document.getElementById("wage_offer").style.display='block';
    {% else %}
        document.getElementById("wage_accept").style.display='block';
    {% endif %}
...
</script>

The types are being assigned correctly (I know this from another bit of code), but the display style of the HTML is not being changed and I cannot figure out why. Is something wrong with my syntax?

I just tested your code locally, and it works flawlessly.

I suggest that you include {{ player.type }} somewhere in your HTML code so that it is displayed and you can check whether it is indeed 0 or not.

By the way, there is no need for JavaScript here. The following works just as well:

<div id="wage_offer" style="display: {% if player.type == 0 %}block{% else %}none{% endif %};">
    You have an endowment of 126 ECUs. <br>
    Please make a wage offer. <br>
    <input id="wage_offer_input">
    <button type="button" onclick="wage_offer()">Make Wage Offer</button>        
</div>
<div id="wage_accept" style="display: {% if player.type == 0 %}none{% else %}block{% endif %};">
    You have a cost of working of 26, plus a cost of effort described in the table below. <br>
    Please accept a wage offer. <br>
    <input id="wage_accept_input">
    <button type="button" onclick="wage_accept()">Accept Wage Offer</button>        
</div>

Thank you very much for the assistance! After looking at your first reply, I decided to try and end the script after the {% endif %} (and then start a new script for the rest of my JS), and now it works! So I suppose something is up with the rest of my code which was preventing it from working.

Thank you for pointing out how to avoid using JavaScript here! I was wondering how one would do that. I am going to try and stick to JavaScript for now though because I got it working.