spee.ch/views/partials/publishChannel.handlebars

<div id="claim-channel-input-area">
    <span id="input-error-channel-select" class="info-message info-message--failure"></span>
    <p>
        <label for="channel-name-select">Channel:</label>
        <select type="text" id="channel-name-select" name="channel" value="channel" onclick="check(event)">
            {{#if user}}
                <option value="{{user.channelName}}" >{{user.channelName}}</option>
            {{/if}}
            <option value="@speech" >Anonymous</option>
            <option value="new" >New</option>
        </select>
    </p>

    <div id="channel-create-details" hidden="true">
        <span id="input-error-channel-name" class="info-message info-message--failure"></span>
        <p>
            <label for="channelName">Channel Name: </label>
            @<input type="text" id="channel-name-input" class="input-text input-text--primary" placeholder="exampleChannel" value="" oninput="checkChannelName(event.target.value)">
            <span id="input-success-channel-name" class="info-message info-message--success"></span>
            <br/>

            <label for="password" >Password: </label>
            <input type="password" id="password" placeholder="" value="" class="input-text input-text--primary">
            <br/>
        </p>
            <button >create</button>
    </div>
</div>

<script type="text/javascript">
 // toggle channel creation tool
 const createChannelTool = document.getElementById('channel-create-details');
 function check(event) {
     const selectedOption = event.target.selectedOptions[0].value;
     if (selectedOption != 'new') {
         createChannelTool.hidden = true;
         hideError(document.getElementById('input-error-channel-select'));
     } else {
         createChannelTool.hidden = false;
     }
 }
 function createChannel() {

 }

</script>