I have a script here that interacts with a form. It works fine but has a couple of hiccups before we can call it complete.
The script asks multiple questions which responds depending on what the user selects.
The order of questions are as follows:
Name, Bedrooms, Stories, Style.
I have two problems.
1) You can skip the first input field without entering a name. I need to make sure the user enters a name.
2) I get an invalid response when I go from Stories > Styles. Why?
If I could get some help that would be great.
Cheers
window.addEventListener('load', function()
{
// Create our node store, allowing us easy access to the nodes in the future.
var nodes = {};
nodes.consultant = document.querySelector('#consultant');
nodes.scope = nodes.consultant.querySelector('.col');
nodes.response = nodes.scope.querySelector('.consultant-response');
nodes.question = nodes.scope.querySelector('.consultant-question');
nodes.input = nodes.scope.querySelector('.consultant-input-wrap');
nodes.image = nodes.consultant.querySelector('.consultant-image');
nodes.dots = nodes.scope.querySelector('.consultant-dots');
var clientName = '';
// This variable will store the current question.
var question;
// Create our question store, we will iterate through these by shifting the
// first item off and replacing the question variable with it. Once the
// client has responded to the question, it will be pushed in the responses
// store below.
var questions = [
{
name: 'name',
question: 'Let’s start now. You know my name. What’s yours?',
image: 'consultant-introduction.png',
input: (function()
{
var form = document.createElement('form');
var input = document.createElement('input');
input.placeholder = 'Enter your name';
input.className = 'consultant-input';
form.appendChild(input);
var submit = document.createElement('button');
submit.className = 'fa fa-chevron-right';
form.appendChild(submit);
return form;
})(),
response: function(name)
{
if (typeof name === 'undefined')
{
return;
}
question.image = 'consultant-bedroom-question.png';
clientName = name;
return "Hey " + name + ". Great to meet you. I’ve got a couple of questions about the new home you want to build.";
}
},
{
name: 'bedrooms',
question: "How many bedrooms would you like?",
input: document.querySelector('[name="_sfm_bedrooms[]"]').cloneNode(true),
original: document.querySelector('[name="_sfm_bedrooms[]"]'),
response: function(bedrooms)
{
if (typeof bedrooms === 'undefined')
{
return;
}
var response = '';
switch (+bedrooms)
{
case 5:
response = "Five! Sounds like you need plenty of room for the family and a guest or three.";
question.image = 'consultant-five-bedroom-answer.png';
break;
case 4:
response = "4 bedrooms, great! We’ve got plenty of ideas for you already.";
question.image = 'consultant-four-bedroom-answer.png';
break;
case 3:
response = "Brilliant, 3 bedrooms. We love smaller but perfectly formed homes too.";
question.image = 'consultant-three-bedroom-answer.png';
break;
default:
response = "Well that isn't a valid response...";
question.image = '';
}
return response;
}
},
{
name: 'levels',
question: function(bedrooms)
{
if (typeof bedrooms === 'undefined')
{
return;
}
var question = '';
switch (+bedrooms)
{
case 5:
question = "Does that mean you want two storeys as well or would you rather spread out over one?";
break;
case 4:
question = "How high would you like to go? One or two storeys?";
break;
case 3:
question = "Does that mean you’re after a single storey home or two levels maybe? ";
break;
default:
}
return question;
},
input: document.querySelector('[name="_sfm_levels[]"]').cloneNode(true),
original: document.querySelector('[name="_sfm_levels[]"]'),
response: function(levels)
{
var response = '';
switch (+levels)
{
case 2:
response = "Thanks " + clientName + ", two storeys will give you a lot of flexibility.";
question.image = 'consultant-two-storey-answer.png';
break;
case 1:
response = "Nice " + clientName + ", a single storey home is a great option.";
question.image = 'consultant-one-storey-answer.png';
break;
default:
response = "Well that isn't a valid response...";
question.image = '';
}
return response;
}
},
{
name: 'style',
question: "I’ve got one more question, do you like contemporary or traditional style homes?",
image: 'consultant-style-answer.png',
input: document.querySelector('[name="_sfm_style[]"]').cloneNode(true),
original: document.querySelector('[name="_sfm_style[]"]'),
response: function(style)
{
var response = '';
switch (style)
{
case 'Traditional':
response = "You can’t beat the classics eh! Brilliant, check out a few ideas we think you’ll like below.";
break;
case 'Modern':
response = "Great, you’re after something a little more modern. Check out a few ideas we think you’ll like below.";
break;
default:
response = "Well that isn't a valid response...";
question.image = '';
}
return response;
}
},
{
name: 'done',
question: "Remember, these plans are just a starting point. We can completely customise any of them to suit your needs perfectly.",
input: (function()
{
var wrap = document.createElement('div');
wrap.className = 'consultant-done-wrap';
var elmnt = document.createElement('a');
elmnt.className = 'consultant-done fa fa-angle-down';
elmnt.href = "#find-a-plan";
wrap.appendChild(elmnt);
return wrap;
})()
}
];
// Once a client responds to a question, that question object will be added
// to this array.
var responses = [];
// Create our function store, this helps organize our functions, but also
// prevents conflict with existing function names.
var funcs = {};
// Prompt the user with the new question.
funcs.prompt = function(e)
{
// Cancel the default event if an event object is supplied
if (typeof e !== 'undefined' && typeof e.preventDefault === 'function')
{
e.preventDefault();
}
// Store the previous response if it is available, so that we can pass
// it to the question function.
var previous = {};
if (typeof question !== 'undefined')
{
if (question.input instanceof HTMLElement)
{
// If the input field is a form element, we have to search for
// the input element.
if (/form/i.test(question.input.tagName))
{
previous.value = question.input.querySelector('input').value;
}
else
{
previous.value = question.input.value;
}
// If there was no selected value, or the value is empty, stop here
if (typeof previous === 'undefined' || previous.length === 0)
{
return;
}
}
// Check if the response field is supplied
if (typeof question.response !== 'undefined')
{
if (typeof question.response === 'function')
{
// If the response is a function, call it with the value of the input,
// and apply the output to the response node.
nodes.response.innerHTML = question.response(previous.value);
}
else
{
// If it isn't a function, apply the value to the response node.
nodes.response.innerHTML = question.response;
}
// Push the current question onto the response array.
responses.push(question);
// Remove the current input element.
nodes.input.removeChild(question.input);
}
// Just a check to make sure the dot element is actually an element,
// safety first!
if (question.dot instanceof HTMLElement)
{
// Set the dot for the current question as active.
question.dot.className += ' active';
}
previous.question = question;
}
// Assign the new question to the current question variable.
// This removes the first question from the question store.
question = questions.shift();
// If we are on the first question, load the image for this question.
if (typeof previous.question === 'undefined')
{
previous.question = question;
}
// If there is an image attached to the previous question, show it.
// This is usually set in the response field, so we can know what the response was.
if (typeof previous.question.image !== 'undefined')
{
if (nodes.image instanceof HTMLElement)
{
nodes.image.style.backgroundImage = 'url(' + previous.question.image + ')';
}
}
// Check to see if the question field is set.
if (typeof question.question !== 'undefined')
{
if (typeof question.question === 'function')
{
// If the question is a function, call it and apply the output
// to the question node.
nodes.question.innerHTML = question.question(previous.value);
}
else
{
// If it isn't a function, apply the value to the question node.
nodes.question.innerHTML = question.question;
}
}
// Check if the input field is an HTML element
if (question.input instanceof HTMLElement)
{
// If it is, insert it into the input container.
nodes.input.appendChild(question.input);
}
// Check to see if we are on the last question or not.
if (question.name !== 'done')
{
// If not, check if the input element is an HTML element
if (question.input instanceof HTMLElement)
{
// Make sure the input element isn't actually a form element.
if (!/form/i.test(question.input.tagName))
{
// Apply the styling to the input element.
question.input.className += ' consultant-input';
// Apply the event listener to the input element.
question.input.addEventListener('change', funcs.prompt, false);
}
else
{
// Apply the event listener to the input element.
question.input.addEventListener('submit', funcs.prompt, false);
}
}
}
else
{
// If we are on the last question, remove the dots and update the originals.
nodes.scope.removeChild(nodes.dots);
funcs.updateAllInputs();
}
};
// Update an individual input.
funcs.updateInput = function(response)
{
// If no original element was passed, exit the function
if (typeof response.original === 'undefined')
{
return;
}
// Check to see if the original field is actually an HTML element.
if (response.original instanceof HTMLElement)
{
// Set the value of the original input to that of the client input.
response.original.value = response.input.value;
// This is because IE is stupid. We have to check if "fireEvent" is a function.
if ("fireEvent" in document)
{
// If it is, the user is browsing with IE, use the "fireEvent" function
response.original.fireEvent('onchange');
}
else
{
// If it isn't, the user is browsing with a real browser.
// Create a "change" event.
var event = new UIEvent("change",
{
"view": window,
"bubbles": true,
"cancelable": true
});
// Dispatch the "change" event
response.original.dispatchEvent(event);
}
}
};
// Update all of the inputs.
funcs.updateAllInputs = function()
{
// Iterate through the responses array.
for (var i in responses)
{
// This excludes the "length" field, only relevant on mobile devices.
if (responses.hasOwnProperty(i))
{
// Update the original input.
funcs.updateInput(responses[i]);
}
}
};
// Make the dots to show the progress through the consultant
funcs.makeDots = function()
{
// Iterate through the questions array.
for (var i in questions)
{
// This excludes the "length" field, only relevant on mobile devices.
if (questions.hasOwnProperty(i))
{
// Skip the last question.
if (questions[i].name === 'done')
{
continue;
}
// Make the dot
questions[i].dot = document.createElement('li');
// Append the dot to the dots container
nodes.dots.appendChild(questions[i].dot);
}
}
};
// Make the dots.
funcs.makeDots();
// Prompt the first question.
funcs.prompt();
}, false);
HTML
<section class="beige section-padding strip-wrap" id="consultant">
<div class="container entry clr">
<div class="clr col span_1_of_3 col-1">
<h1 class="red">Can I help?</h1>
<div class="white consultant-response">
Hi, I'm Glenda. Our job is to make your build as easy and tailored as possible.
</div>
<div class="orange consultant-question"></div>
<div class="consultant-input-wrap"></div>
<ul class="consultant-dots"></ul>
</div>
<div class="clr col span_2_of_3"></div>
<a href="#find-a-plan">
<div class="strip">These homes are a perfect starting point
<div class="strip-arrow"><i class="fa fa-chevron-down"></i></div>
</div>
</a>
</div>
<!-- .entry-content -->
<div class="consultant-showcase">
<div class="consultant-image">
<div class="consultant-introduction"></div>
<div class="consultant-bedroom-question"></div>
<div class="consultant-three-bedroom-answer"></div>
<div class="consultant-four-bedroom-answer"></div>
<div class="consultant-five-bedroom-answer"></div>
<div class="consultant-one-storey-answer"></div>
<div class="consultant-two-storey-aswer"></div>
<div class="consultant-style-answer"></div>
</div>
</div>
</section>
1) You can skip the first input field without entering a name. I need
to make sure the user enters a name.
Use required attribute at input or select elements.
Related
https://jsfiddle.net/AlexThunders/k8s79zL5/18/
I'm trying to change self typing text from English to Russian when I click option in select:
let engType = [
'Never give up. ',
'You can win. '
]
let rusType = [
'Никогда не сдавайся. ',
'Ты можешь победить. '
]
page is loaded and this function gradually types letters:
function typeCharacters(phrases) {
if(phrases[count] !== undefined && phrases[count] !== null && phrases[count] !== "") {
let allLength = phrases[count].length
setInterval(() => {
if(phrases[count] !== undefined && typePar !== null) {
character = phrases[count].slice(ind,ind+1)
txt = document.createTextNode(character)
typePar.appendChild(txt)
ind++
let typeLength = typePar.textContent.length
if(typeLength === allLength) {
count++
ind = 0
if(phrases[count] !== undefined) {
allLength += phrases[count].length
}
}
}
},100)
}
}
typeCharacters(engType)
It works. But when I merely touch select button without even choosing language, I get nonsense paragraph with mixed letters in one or in both languages within the same paragraph:
function searchLang(choosenLang) {
//if choosen language coincides with one in Object:
if(languages[choosenLang]) {
allDataElements.forEach(element => {
//every property of choosen object/language
for(let x in languages[choosenLang]) {
//compare with element's data attribute
if(element.getAttribute('data') === x) {
//the same attribute changes iinerText in accordance with object
element.innerText = languages[choosenLang][x]
if(languages[choosenLang].changePhrases !== undefined) {
languages[choosenLang].changePhrases(choosenLang)
}
}
}
})
}
}
select.addEventListener('click', () => {
allLangOptions.forEach(option => {
if(option.selected === true) {
let lang = option.value
searchLang(lang)
}
})
})
and the result:
Никeгда не сд.вайся. Тыuможешь по едить. OR
Никогда нe up. айс
However for other html elements select button works right: only when I choose option but not click select itself.
I use changePhrases functions in object to change language in typing paragraph:
let languages = {
en: {
mPheadLIabout: 'About',
mPheadLIprojects: 'Projects',
mPheadLIcontacts: 'Contacts',
changePhrases: function() {
if(typePar !== null) {
typePar.textContent = "";
count = 0
ind = 0
typeCharacters(engType)
}
}
},
ru: {
mPheadLIabout: 'О сайте',
mPheadLIprojects: 'Проекты',
mPheadLIcontacts: 'Контакты',
changePhrases: function() {
if(typePar !== null) {
typePar.textContent = "";
count = 0
ind = 0
typeCharacters(rusType)
}
}
}
}
At first paragraph clears itself, and begins to type from first character as indicated above.
I've tried to use variable reset to stop invoking typing English characters but unsuccessfully.
Also I've applied different variants with setTimeout and promise for case when paragraph is cleared and only then you run function typeCharacters(rusType). Still not working and no errors in console.
And the same result I get with English.
Looks like when I click select button(not options) it again fires function to type text, not waits till I use options. And when I click option it fires to times simultaneously.
Here is the entire code and weird result:
https://jsfiddle.net/AlexThunders/k8s79zL5/18/
Instead of binding an event handler to the click event, you should only fire the callback when a user changes the selected option of a select element. So the event type should be change:
select.addEventListener('change', () => {
allLangOptions.forEach((option) => {
if (option.selected === true) {
let lang = option.value;
searchLang(lang);
}
});
});
This way you can also use your keyboard to change the options. Although keyboard users could change the language option, as this is not a mouse click, your click event would not fire and the callback inside your addEventListener would not run. Make sure you always hook to the change event of the select element.
Another problem is that you never cancel the interval. When you select a language, it just starts another timer which just messes up everything. It will look like the effect is sped up, the text become gibberish as the different characters are getting mixed, etc.
To avoid this, you need to save the interval ID returned from window.setInterval() and cancel it when you run typeCharacters():
// ...
let reset = false;
// create a variable in an outer scope
let activeInterval = null;
function typeCharacters(phrases) {
// clear running interval
clearInterval(activeInterval);
if (reset) return;
if(phrases[count] !== undefined
&& phrases[count] !== null
&& phrases[count] !== "") {
let allLength = phrases[count].length
// save the interval ID
activeInterval = setInterval(() => {
if(phrases[count] !== undefined && typePar !== null) {
// ... rest of your code
What I'm trying to do:
Figure out how to reference/grab geoJSON data from a server.
In this case I'm just using an example on the openLayers doc.
Ideally I'd just be able to print out a features ID/type, but I cannot get it to work.
What's happening:
var selectElement = document.getElementById('type');
var source = vector.getSource();
var feature = source.getFeatures()[0];
var changeInteraction = function() {
if (select !== null) {
map.removeInteraction(select);
}
var value = selectElement.value;
if (value == 'singleclick') {
select = selectSingleClick;
} else if (value == 'click') {
select = selectClick;
} else if (value == 'pointermove') {
select = selectPointerMove;
} else if (value == 'altclick') {
select = selectAltClick;
} else {
select = null;
}
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
document.getElementById('status').innerHTML = feature.getGeometry().getType();
});
console.log(feature);
}
};
I was hoping my innerHTML would display "Polygon" in this case, but no such luck. I've tried various combinations, and been looking over the documentation, can't see what I'm doing wrong.
The server I'm trying to grab the info from is,
https://openlayers.org/en/v4.6.4/examples/data/geojson/countries.geojson
Any help would be appreciated.
(I can attach full code if helpful)
I was able to replicate your program and find the solution for retrieving the Country's name for a selected feature, as mentioned in your comments.
First, remove the following lines. You don't want the first feature of the source file but the first selected feature instead.
var source = vector.getSource();
var feature = source.getFeatures()[0];
Second, define the feature inside the callback function(e) for the select Event. Also, since getFeatures() will return a Collection of features the getArray() method is necessary.
The get(key) method will return a value for a determined key, "name" in this case.
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
var feature = e.target.getFeatures().getArray()[0];
document.getElementById('status').innerHTML = ' ' +
feature.get("name") + ' ' + feature.getId();
});
}
Requesting a sanity check here please...
ExtJS 4.2 comboBox Typeahead works but having issues retrieving the valueField under the following conditions:-
1) If a user types a value and then instead of hitting enter or clicking on the select combo list, they click elsewhere then the valueField is empty but the selected value is present.
2) Assuming that the combobox item was selected correctly, If I enter an additional character and then backspace that character, the combo box can no longer find the valueField..its almost like it has reset itself.
Fiddle example
https://fiddle.sencha.com/#fiddle/je1
How to reproduce
If you enter Maggie in the combo box, you will see the valueField ID in the console window, if you append a character and then backspace the character, the ID in the console window is null
(You will need to open the console window to see the output)
forceSelection does not resolve this issue as I have a template and it will not accept an entry in the combobox that is not part of the store, and I need to use sumID for my valueField as I need to retrieve and pass that value to the server.
Thank you everyone, awesome to have such a great community!!
I was able to get around this by using forceSelection and overriding the setValue thus allowing template items not in the store but in the combo to be selected via forceSelection. From playing around with the combobox, IMO, for a good look and feel, forceSelection is the way to go.
Here is my override, refer to statement //start of override
This was a quick fix, I will refine statement when I am back in the office, below I am pasting the solution from memory, you get the idea.
setValue: function(value, doSelect) {
var me = this,
valueNotFoundText = me.valueNotFoundText,
inputEl = me.inputEl,
i, len, record,
dataObj,
matchedRecords = [],
displayTplData = [],
processedValue = [];
if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
me.value = value;
me.setHiddenValue(me.value);
return me;
}
// This method processes multi-values, so ensure value is an array.
value = Ext.Array.from(value);
// Loop through values, matching each from the Store, and collecting matched records
for (i = 0, len = value.length; i < len; i++) {
record = value[i];
if (!record || !record.isModel) {
record = me.findRecordByValue(record);
}
// record found, select it.
if (record) {
matchedRecords.push(record);
displayTplData.push(record.data);
processedValue.push(record.get(me.valueField));
}
// record was not found, this could happen because
// store is not loaded or they set a value not in the store
else {
//start of override
// 'Select All Names' is the template item that was added // to the combo box, it looks like an entry from the store
// but it is not in the store
if (me.forceSelection && me.getDisplayValue() === 'Select All Names'){
processedValue.push(value[i]);
dataObj = {};
dataObj[me.displayField] = value[i];
displayTplData.push(dataObj);
}
//end of override
if (!me.forceSelection) {
processedValue.push(value[i]);
dataObj = {};
dataObj[me.displayField] = value[i];
displayTplData.push(dataObj);
// TODO: Add config to create new records on selection of a value that has no match in the Store
}
// Else, if valueNotFoundText is defined, display it, otherwise display nothing for this value
else if (Ext.isDefined(valueNotFoundText)) {
displayTplData.push(valueNotFoundText);
}
}
}
// Set the value of this field. If we are multiselecting, then that is an array.
me.setHiddenValue(processedValue);
me.value = me.multiSelect ? processedValue : processedValue[0];
if (!Ext.isDefined(me.value)) {
me.value = null;
}
me.displayTplData = displayTplData; //store for getDisplayValue method
me.lastSelection = me.valueModels = matchedRecords;
if (inputEl && me.emptyText && !Ext.isEmpty(value)) {
inputEl.removeCls(me.emptyCls);
}
// Calculate raw value from the collection of Model data
me.setRawValue(me.getDisplayValue());
me.checkChange();
if (doSelect !== false) {
me.syncSelection();
}
me.applyEmptyText();
return me;
},
Look at the sources of Combobox and try override this method as follows
doLocalQuery: function(queryPlan) {
var me = this,
queryString = queryPlan.query;
if (!me.queryFilter) {
me.queryFilter = new Ext.util.Filter({
id: me.id + '-query-filter',
anyMatch: me.anyMatch,
caseSensitive: me.caseSensitive,
root: 'data',
property: me.displayField
});
me.store.addFilter(me.queryFilter, false);
}
if (queryString || !queryPlan.forceAll) {
me.queryFilter.disabled = false;
me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString) : queryString);
}
else {
me.queryFilter.disabled = true;
}
me.store.filter();
if (me.store.getCount()) {
if (me.rawValue === me.lastSelection[0].get(me.displayField)){
me.setValue(me.lastSelection);
} else {
if(me.store.getCount() === 1){
me.setValue(me.store.first());
}
me.expand();
}
} else {
me.collapse();
}
me.afterQuery(queryPlan);
},
As my app is growing, I'm finding more need for more effective form validation. I personally don't like the angular built in validation that evaluates on field change. And there are always things it won't account for like verifying that a youtube video id is valid. Currently I'm doing validation in each forms controller. I have a function that looks like this. Each field has a message and if there is an error the message will appear red using ng-class.
$scope.validate = function (callback) {
// reset default messages
setMessages();
// create shorter references
var item = $scope.item,
message = $scope.itemMessage;
// title exists
if (item.title === '') {
message.title.message = 'You must give your item a title.';
message.title.error = true;
message.errors += 1;
}
// extract and clear video id with youtube api
if ($scope.temp.video !== undefined && $scope.temp.video !== '') {
var id = '';
var url = $scope.temp.video.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
if(url[2] !== undefined) {
id = url[2].split(/[^0-9a-z_]/i);
id = id[0];
} else {
id = url;
}
$http.get("http://gdata.youtube.com/feeds/api/videos/" + id)
.then(function (res) {
$scope.item.video = id;
}, function (res) {
message.video.message = 'That is not a valid youtube video.';
message.video.error = true;
message.errors += 1;
$scope.item.video = '';
});
}
if (message.errors === 0) {
callback();
}
};
and then my actual form submission function calls $scope.validate(); passing it a function containing the $http.post(). The two major problems I see are that my callback isn't promise base so there's no guarantee it won't be called when an error exists and I've read again and again to keep large chunks of logic outside of your controller. I haven't found great examples of how this should be done but it must be a common problem.
You can still use Angular's built-in validation and have it not evaluate unless the form has been submitted:
http://scotch.io/tutorials/javascript/angularjs-form-validation#only-showing-errors-after-submitting-the-form
Essentially you set $scope.submitted = true when the form is submitted and set a conditional check so that error messages and classes are only shown when $scope.submitted is set.
I have a page where you can invite teams. Clicking "Invite teams" makes a popup box appear showing a search input. The search-function is AJAX based. When a team is found through your search word(s), you'll have to click on the team whereupon the team will be showed in a "Invited-teams"-box.
It works in a way that when you "add" the team, a hidden input field is generated containing the team's ID as a value. The problem is that with my current code, it is possible to add the same team as many times as you wish. I should be possible to check, if the team can be found in the hidden-input-data. If it already exists, it should not be possible to add the sane team.
My current javascript-code can be found beneath here. Please notice that I have tried to make the code that checks the team, but it doesn't work.
function addTeam(tid) {
// Grab the input value
var teamName = document.getElementById(tid).innerHTML;
var teamID = document.getElementById(tid).id;
// If empty value
if(!teamName || !teamID) {
alert('An error occured.');
} else {
//Tried to do the "team-adlready-added"-test, but it doesn't work
var stored_teams = $t('#store-teams').getElementsByTagName('input');
for (var i = 0; i < stored_teams.length; i++) {
var stored_team = stored_teams[i];
if(stored_team.value == teamID) {
break;
var team_already_added = 1;
}
alert(team_already_added);
}
if((team_already_added) || team_already_added != 1) {
// Store the team's ID in hidden inputs
var store_team = document.createElement('input');
store_team.type = 'hidden';
store_team.value = teamID;
// Append it and attach the event (via onclick)
$t('#store-teams').appendChild(store_team);
// Create the teams with the value as innerHTML
var div = document.createElement('div');
div.className = 'team-to-invite';
div.innerHTML = teamName;
// Append it and attach the event (via onclick)
$t('#teams').appendChild(div);
}
div.onclick = removeTeam;
}
return false;
}
Thanks in advance.
I just want to give you a hint for a possible solution without html elements.
You can create a new functional object for team:
var Team = function (id, name) {
this.name = name;
this.id = id;
}
Create an array which will contain teams:
var TeamList = [];
Add you Teams:
TeamList.push(new Team(1, "Team 1"));
TeamList.push(new Team(2, "Team 2"));
TeamList.push(new Team(3, "Team 3"));
TeamList.push(new Team(4, "Team 4"));
Write a function which loops trough the list of teams and checks with the id if a team already exists:
function containsTeam(id) {
for (var i = 0; i < TeamList.length; i++) {
if (TeamList[i].id == id) {
return true;
}
}
return false;
}
Just check it:
containsTeam(1); //returns true
containsTeam(5); //returns false
Have a look at the jsFiddle DEMO and open the console to see the output.
EDIT: In addition, to remove an element you can write a function which looks pretty much the same as the containsTeam function. Just use array.splice instead of returning true:
function removeTeam(id) {
for (var i = 0; i < TeamList.length; i++) {
if (TeamList[i].id == id) {
TeamList.splice(i, 1);
}
}
}
And remove a team:
removeTeam(3);
Your variable scope is off.
You declare team already added in the wrong spot.
Declare it with team name and team id and it will get you in the right direction