Chat Login with different multiple names

#1

I’m working on a chat/game-project on meteor and got stuck.

People can create names, which are saved on a character-collection. Later they can choose between those names, depending on what name they want to have displayed on the chat.

This was my plan: First, I created a login-Template filling a select-element with all the names, that were previously created:

<template name="chat_char">
<form class="log-in">
      <select>
          {{#each characters}}
              <option name="character">{{name}}</option>
          {{/each}}
       </select>
          <button>Enter</button>
  </form>
</template>

After that I went to the js-file to create the process in order to log people in:

Template.chat_char.events({
  'submit .log-in'(event) {
    // set session {{name}}    
    //route to chat-overview-rooms
  
   }
});

My plan was to save {{name}} by document.getElementById('character').textContent; and get the name this way, then save it in a session to use it. After that I would redirect to to the chat with the router. The error in console.log says Cannot read property 'textContent' of null. Am I using .textContent wrong or is there a better way to read out the value of {{name}}?

#2

Your html doesn’t have any IDs in it, so getElementById will never return anything. Also, name is not a valid attribute of an <option> element.

What you want is to put a name or ID on the <select> and then get the selected value like so:

select.options[select.selectedIndex].text

I would do it like this

<template name="chat_char">
  <form class="log-in">
    <select name="character">
      {{#each characters}}
        <option>{{name}}</option>
      {{/each}}
    </select>
    <button>Enter</button>
  </form>
</template>
Template.chat_char.events({
  'submit .log-in'(event) {
    var select = event.currentTarget.character;
    var name = select.options[select.selectedIndex].text;
    // set session {{name}}    
    //route to chat-overview-rooms
   }
});
1 Like
#3

Thanks for the reply. Trying your example gave me a similar error message:

Uncaught TypeError: Cannot read property 'options' of undefined

However, I tried to give the select-tag an ID instead of an name and tried this again:

var name = document.getElementById('character').textContent

No errors this time. But the console log gave all names that were available instead of just the currently selected.
Putting the ID in the option-tag just gave me the the first name, no matter what option I choose.

  'submit .log-in'(event) {
    event.preventDefault();
     var name = document.getElementById('character').textContent;
  
    //var select = event.currentTarget.characters;
    // var name = select.options[select.selectedIndex].text;
    console.log(name);
    // set session {{name}}    
    //route to chat-overview-rooms
   }
});
#4

His previous message had a typo, event.currentTarget.character not event.currentTarget.characters.

Your problem is you’re still trying to get the text of the entire select - you want to get the text of the selected opton.

Template.chat_char.events({
  'submit .log-in'(event) {
    var select = event.currentTarget.character;
    var name = select.options[select.selectedIndex].text;
    // set session {{name}}    
    //route to chat-overview-rooms
   }
});
2 Likes
#5

Ah, that did the trick. Thank you very much.

#6

Whoops, thanks for picking up the typo haha