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}}?
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
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
}
});
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
Ah, that did the trick. Thank you very much.
Whoops, thanks for picking up the typo haha