Good evening everyone. I'm implementing the autocomplete function as source code below. But when I apply it to IE11, it doesn't work, it doesn't do autocomplete when the user enters, but only works when we click on the input. I went to find the cause but still can't find it, hope everyone will help me. Thanks very much.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
font-family: 'Source Sans Pro', sans-serif;
font-size: large;
max-width: 500px;
margin: 0 auto;
}
input[type=email] {
font-size: large;
width: 400px;
-webkit-appearance: none;
appearance: none;
}
input::-webkit-calendar-picker-indicator {
display: none;
}
label {
display: block;
font-size: small;
text-transform: uppercase;
letter-spacing: 2px;
color: #999;
}
</style>
</head>
<body>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="your#email.com">
<script>
const EmailDomainSuggester = {
domains: ["yahoo.com", "gmail.com", "google.com"],
bindTo: $('#email'),
init: function () {
this.addElements();
this.bindEvents();
},
addElements: function () {
// Create empty datalist
this.datalist = $("<datalist />", {
id: 'email-options'
}).insertAfter(this.bindTo);
// Corelate to input
this.bindTo.attr("list", "email-options");
this.bindTo.attr("autocomplete", "off");
},
bindEvents: function () {
this.bindTo.on("keyup", this.testValue);
},
testValue: function (event) {
let el = $(this),
value = el.val();
// email has #
// remove != -1 to open earlier
if (value.indexOf("#") != -1) {
value = value.split("#")[0];
EmailDomainSuggester.addDatalist(value);
} else {
// empty list
EmailDomainSuggester.datalist.empty();
}
},
addDatalist: function (value) {
let i, newOptionsString = "";
for (i = 0; i < this.domains.length; i++) {
newOptionsString += "<option value='" + value + "#" + this.domains[i] + "'>";
}
// add new ones
this.datalist.html(newOptionsString);
}
}
EmailDomainSuggester.init();
</script>
</body>
</html>
Related
I'm trying to figure out how to make a dialogue system that shows the text and after you click it removes all the text in the box and new text appears in its place. (I want to be able to do this multiple times)
var container = document.querySelector(".text");
var speeds = {
pause: 400,
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
var textLines = [{
speed: speeds.slow,
string: "this is a test"
},
{
speed: speeds.pause,
string: "",
pause: true
},
{
speed: speeds.normal,
string: "pls help me"
},
{
speed: speeds.fast,
string: "idk what im doing",
classes: ["red"]
},
{
speed: speeds.normal,
string: ":("
}
];
var characters = [];
textLines.forEach((line, index) => {
if (index < textLines.length - 1) {
line.string += " ";
}
line.string.split("").forEach((character) => {
var span = document.createElement("span");
span.textContent = character;
container.appendChild(span);
characters.push({
span: span,
isSpace: character === " " && !line.pause,
delayAfter: line.speed,
classes: line.classes || []
});
});
});
function revealOneCharacter(list) {
var next = list.splice(0, 1)[0];
next.span.classList.add("revealed");
next.classes.forEach((c) => {
next.span.classList.add(c);
});
var delay = next.isSpace && !next.pause ? 0 : next.delayAfter;
if (list.length > 0) {
setTimeout(function() {
revealOneCharacter(list);
}, delay);
}
}
setTimeout(() => {
revealOneCharacter(characters);
}, 600)
const btn = document.getElementById('btn');
html,
body {
height: 100%;
width: 100%;
}
.text span {
opacity: 0;
}
.text span.revealed {
opacity: 1;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
<script src="script.js">
}
</script>
<script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script>
</body>
</html>
so far all I'm able to make from this is a single phrase appear on the screen and that's about it. to change it, I have to go in manually.
I make (almost) all the js from scratch because it would have been really hard to refactor your code in order to achieve what you want, what I've done seems to work, it is pretty straightforward :
const container = document.querySelector(".text");
const btn = document.querySelector("#textchanger");
// rename speeds in delays which is more coherant
const delays = {
slow: 120,
normal: 50,
fast: 20,
superFast: 10
};
const textLines = [
{
delay: delays.slow,
string: "this is a test"
},
{
delay: delays.normal,
string: "pls help me"
},
{
delay: delays.fast,
string: "idk what im doing",
classes: ["red"]
},
{
delay: delays.normal,
string: ":("
}
];
const revealLine = (lineIndex = 0) => {
const line = textLines[lineIndex]
let charIndex = 0
const nextChar = () => {
const char = line.string[charIndex]
const span = document.createElement('span')
span.textContent = char
span.classList.add(...(line.classes ?? []))
container.appendChild(span)
charIndex++
if (charIndex < line.string.length)
setTimeout(nextChar, line.delay);
else if (lineIndex + 1 < textLines.length) {
const cb = () => {
// remove this listener to display the next one
btn.removeEventListener('click', cb)
// clear the container
Array.from(container.children).forEach(el => el.remove())
// reveal the next line
revealLine(lineIndex + 1)
}
btn.addEventListener('click', cb)
}
}
nextChar()
}
revealLine()
html,
body {
height: 100%;
width: 100%;
}
.text span.green {
color: #27ae60;
}
.text span.red {
color: #ff0000;
}
body {
background: #3498db;
padding: 3em;
font-family: 'Sora', monospace;
}
.text {
font-size: 6vw;
word-spacing: 0.2em;
margin: 0 auto;
background: #fff;
padding: 1em;
border-bottom: 1vw solid #0e6dad;
position: relative;
line-height: 1.2em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="text">
</div>
<button id="textchanger"> continue </button>
</body>
</html>
I am beginner in Js ,I tried this code by some tutorials .It is not working and I don't know what and where problem is?
When embedding JavaScript in an HTML document, where is the proper place to put the tags and included JavaScript? I seem to recall that you are not supposed to place these in the section, but placing at the beginning of the section is bad, too, since the JavaScript will have to be parsed before the page is rendered completely (or something like that). This seems to leave the end of the section as a logical place for tags.
var questions = [
'Whats your name ?',
'Where are you from?',
'What\'s your age?',
'What profile you are working on?',
'It was nice talking you :)'
];
var num = 0;
var inputBox = document.querySelector("#ans"); //
var output = document.querySelector("#result"); //
output.innerHTML = questions[num];
function showResponse() {
var input = inputBox.value;
if (inputBox.value == "") {
} else {
if (num == 0) {
output.innerHTML = `Hii ${input}`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 1) {
output.innerHTML = `${input} must be a good place`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 2) {
output.innerHTML = `So you are ${2017 - input} born`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 3) {
output.innerHTML = `Awesome ${input}`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
}
}
}
function changeQuestion() {
inputBox.setAttribute("placeholder", "Enter your response");
output.innerHTML = questions[num];
if (num == 4) {
inputBox.style.display = "none";
}
}
$(document).on('keypress', function(e) {
if (e.which == 13) {
showResponse();
}
})
$("#ans").focus();
this is Css code
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
background: #50514F;
color: #fff;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 40px;
font-weight: 600;
border: 3px solid #fff;
padding: 10px 20px;
margin-bottom: 40px;
}
.flex {
display: flex;
justify-content: center;
flex-flow: column;
align-items: center;
height: 100vh;
}
#result {
font-size: 36px;
color: #fff;
}
#ans {
color: #fff;
padding: 20px;
font-size: 26px;
background: transparent;
border: 0;
}
#ans:focus {
outline: 0;
outline-offset: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<div class="flex">
<div>
<h1>Assitant</h1>
</div>
<div id="result">
</div>
<div class="input">
<input type="text" id="ans" placeholder="Enter your response" required/>
<script type="text/javascript" src="1.js" async></script>
</div>
</div>
</html>
You have errors in the layout and you are using javascript code examples from a library jquery that you haven't included. Also your HTML file itself was incorrect and missing body definitions.
I would recommend you have a look at w3 schools and their tutorials: https://www.w3schools.com/html/html_intro.asp
Good practice is to look at online resources first before posting here.
This is your code with those issues corrected (changes the names of the script and css files to work with this tool). You also have formatting and spelling errors that you need to look at.
var questions = [
'Whats your name ?',
'Where are you from?',
'What\'s your age?',
'What profile you are working on?',
'It was nice talking you :)'
];
var num = 0;
var inputBox = document.querySelector("#ans"); //
var output = document.querySelector("#result"); //
output.innerHTML = questions[num];
function showResponse() {
var input = inputBox.value;
if (inputBox.value == "") {
} else {
if (num == 0) {
output.innerHTML = `Hii ${input}`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 1) {
output.innerHTML = `${input} must be a good place`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 2) {
output.innerHTML = `So you are ${2017 - input} born`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
} else if (num == 3) {
output.innerHTML = `Awesome ${input}`;
inputBox.value = "";
inputBox.setAttribute("placeholder", "Wait for 2 secs");
++num;
setTimeout(changeQuestion, 2000);
}
}
}
function changeQuestion() {
inputBox.setAttribute("placeholder", "Enter your response");
output.innerHTML = questions[num];
if (num == 4) {
inputBox.style.display = "none";
}
}
// this is jquery syntax and won't work
// $(document).on('keypress', function(e) {
// if (e.which == 13) {
// showResponse();
// }
//})
document.addEventListener('keypress', function(e) {
if (e.which == 13) {
showResponse();
}
})
// this is jquery syntax and won't work
//$("#ans").focus();
document.querySelector("#ans").focus();
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
background: #50514F;
color: #fff;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
}
h1 {
font-size: 40px;
font-weight: 600;
border: 3px solid #fff;
padding: 10px 20px;
margin-bottom: 40px;
}
.flex {
display: flex;
justify-content: center;
flex-flow: column;
align-items: center;
height: 100vh;
}
#result {
font-size: 36px;
color: #fff;
}
#ans {
color: #fff;
padding: 20px;
font-size: 26px;
background: transparent;
border: 0;
}
#ans:focus {
outline: 0;
outline-offset: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Chatbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js" async></script>
</head>
<body>
<div class="flex">
<div>
<h1>Assitant</h1>
</div>
<div id="result">
</div>
<div class="input">
<input type="text" id="ans" placeholder="Enter your response" required/>
</div>
</div>
</body>
</html>
I have an issue with the backgroundColor property in JavaScript but my function keeps working, regardless of the error.
Can somebody explain, how this is happening?
Fiddle link
Thank you
JavaScript Code with error:
function surligne(champ, erreur)
{
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
document.getElementById("messageErreur").style.display ="none";
}
Here is your error:
champ.addEventListener("blur", verifMail);
function verifMail(champ) {
change it to this:
champ.addEventListener("blur", verifMail);
function verifMail() {
Champ is already defined at the top of the file, by adding a parameter on the verifyMail function, you make it so that the function can no longer view the the champ variable at the top of the file and instead it sees the blur event.
The reason it does change color is because you call verifMail from the verifForm function, passing the champ parameter.
The loss of focus triggers the blur. It is odd that the blur comes first.that's why on focus out your function again is calling so your error happened. I've correct it with variable value hope it'll help you
If you change the alerts to console.log (or something that does not steal focus), you will see that the events fire correctly.
var modal = document.getElementById('maPopin');
var btn = document.getElementById("monBouton");
var span = document.getElementsByClassName("fermer")[0];
var champ = document.getElementById("mail");
var erreur = true;
btn.addEventListener("click", function() {
modal.style.display = "block";
});
span.addEventListener("click", function() {
modal.style.display = "none";
});
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
});
champ.addEventListener("blur", verifMail);
champ.addEventListener("focus", verifMail);
function verifMail(champ)
{
var regex = /^[a-zA-Z0-9._-]+#[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
if(!regex.test(champ.value))
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
function surligne(champ, erreur)
{ if(champ.type !="focus" && champ.type !=="blur"){
if(erreur)
{
champ.style.backgroundColor = "#fba";
document.getElementById("messageErreur").style.display ="block";
}
else
{
champ.style.backgroundColor = "";
}
}
document.getElementById("messageErreur").style.display ="none";
}
/* } */
champ.addEventListener("keyup", verifForm);
function verifForm()
{
var mailOk = verifMail(champ);
if(mailOk)
{
document.getElementById('submit1').disabled=0;
return true;
}
else
{
document.getElementById('submit1').disabled=1;
return false;
document.getElementById("messageErreur").style.display ="none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* Background pop-in */
.popin {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Style de la pop-in */
.popin-style {
background-color: #FFFFFF;
margin: auto;
padding: 20px;
border: 1px solid #529D93;
width: 35%;
}
/* Bouton fermer */
.fermer {
color: #3f3f3f;
float: right;
font-size: 40px;
font-weight: bold;
}
.bob-style
{
width: 50%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.fermer:hover,
.fermer:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
#messageErreur
{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h2>Exemple de Pop-in</h2>
<button id="monBouton">Qui sommes nous ?</button>
<div id="maPopin" class="popin">
<div class="popin-style">
<span class="fermer">×</span>
<p>Cet objectif a été réalisé par Guillaume et Nicolas... Alias Bob et Patrick </p>
<img src="http://www.chamalow-shop.com/images/t/tds/TDS-bob-patrick-geek-vert-g.gif" class="bob-style">
<form>
<label for="email">Veuillez saisir votre email :</label>
<input type="text" name="email" id="mail" placeholder="Email...">
<button type="submit" id="submit1" disabled="disabled">Envoyer</button>
<p id="messageErreur">Adresse email incorrecte</p>
</form>
</div>
</div>
<script src="myscripts.js"></script>
</body>
</html>
champ.style.backgroundColor = "";
the background color should be set to some value, how can it be blank ?
I have an input box which you can enter items, submit it, and create a box with it's own delete button to remove it. Problem is, after deleting a number of boxes, and then entering something new in input, all the previous items that were deleted get reloaded, including the new item.
How can I prevent reloading of already removed boxes?
Fiddle (Stacksnippets do not allow submit)
This is my Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shopping List Example</title>
<link rel="stylesheet" type="text/css" href="css-list.css">
</head>
<div id="centerPanel">
<form class="my-list-form">
<input type="text" class="input" name="add-input" id="add-input">
<button class="add-button" id="submitBtn">Add</button>
</form>
<ul class="my-list-ul"></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="js-list.js"></script>
</html>
JS:
var state = {items:[]};
var addItem = function(state, item)
{
state.items.push(item);
}
var displayItem = function(state, element){
var htmlItems = state.items.map(function(item){
return '<li class="box">' + item + '</br><button class="divBtns" id="deleteBtn">Delete</button>' + '</li>';
});
element.html(htmlItems);
}
//After deleting items, this button again loads all items that have been created since
//the page loaded up, including the new item.
//Needs to be fixed to not reload the deleted items
$('.my-list-form').submit(function(event){
event.preventDefault();
addItem(state, $('.input').val());
displayItem(state, $('.my-list-ul') );
/* alert(state.items[1]); shows that the items array holds everything that is turned into a div*/
})
$(document).ready(function(e){
$('ul').on('click', '#deleteBtn', function(event){
var rmvButton = $(this).closest('li');
rmvButton.remove();
});
})
css:
* {
font-family: sans-serif;
font-weight: normal;
}
#centerPanel {
margin-left: 50px;
margin-top: 50px;
padding-left: 10px;
}
h1 {
font-size: 34px;
}
.font-size {
font-size: 17px;
}
#add-input {
height:25px;
width: 190px;
font-size: 16px;
}
button {
font-size: 17px;
}
#submitBtn {
height: 30px;
width: 85px;
}
.divBtns {
margin-top: 10px;
}
.box {
border: 1px solid black;
border-color: grey;
width: 153px;
height: 65px;
padding: 20px;
font-style: italic;
font-size: 22px;
margin-bottom:10px;
margin-right: 10px;
}
ul {
list-style-type: none;
margin-left:-40px;
color: grey;
}
li {
float: left;
}
It appears you never remove anything from the state object, which is added to every time you run addItem().
You'd need a way to remove a specific item from this array, probably by getting the index of the li to delete and doing
state.items.splice(index, 1);
Store the index as a data attribute on the button:
var displayItem = function(state, element){
var i = 0;
var htmlItems = state.items.map(function(item){
return '<li class="box">' + item + '</br><button class="divBtns" ' +
'id="deleteBtn" data-index="' + (i++) + '">Delete</button>' + '</li>';
});
element.html(htmlItems);
}
Then you can get it in the click callback
var index = $(this).data('index');
You can update state to solve this problem.
It's my code:
...
var deleteItem = function(state, itemId) {
var index = 0;
var isFind = state.items.some(function(item, i) {
if (item.id == itemId) {
index = i;
return true;
} else {
return false;
}
});
if (isFind) {
state.items.splice(index, 1);
}
}
...
$(document).ready(function(e){
$('ul').on('click', '#deleteBtn', function(event){
...
// update state
deleteItem(state, $(this).parent().data('id'));
});
})
https://jsfiddle.net/q483cLp9/
The following code displays as intended in FireFox, but isn't displaying at all in Internet Explorer (v8).
// getLimits init
Frog.API.get('users.getInfo',
{
'params': {'id': UWA.Environment.user.id, 'details':'groups' },
'onSuccess': AssignPoints.getLimit,
'onError': function(err) { alert(err); }
});
...
// work out the user's limit, and how many points they've spent this week
// use LEAP library if necessary
AssignPoints.getLimit = function(data) {
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
if (AssignPoints.Limit == 0) {
AssignPoints.Specialist = true;
}
UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent);
}
AssignPoints.getPointsSpent = function(data) {
AssignPoints.SpentWeekly = data.SpentWeekly;
AssignPoints.SpentTotal = data.SpentTotal;
AssignPoints.displayLimitAndTotals();
}
// display data from getLimitAndTotals
AssignPoints.displayLimitAndTotals = function() {
var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
if (AssignPoints.Specialist == false) {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
} else {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
}
LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' +
'<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';
$('div#limits').html(LimitsAndTotalsHTML);
}
EDIT: CSS & HTML
I don't think it's a CSS/HTML issue, as I have the previous version of this script (which I decided to rewrite because it was hideous code and some odd mash-up of procedural and just pure bodging) which displays correctly in IE using exactly the same HTML&CSS.
#total_container
{ overflow: hidden; width: 870px; }
#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }
span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }
#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }
#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }
The HTML is just <div id="limits"></div> and the JS updates it.
// EDIT
SECOND EDIT: ALERTS
I've tried putting random alerts into the code. In IE, in the for (var i in data[0].groups) loop, the alerts work. If I place an alert at any point after that for loop, the alert doesn't appear at all, regardless of whether I use a variable name or a random string such as "test".
In FF, the alerts work regardless of placement within either function.
** // SECOND EDIT **
FireFox, working as intended
Internet Explorer, b0rked
Does anyone know what might be breaking IE?
Thanks in advance.
OK! I've found the problem.
IE didn't like this segment of code:
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
When I've changed that to this format:
for (var i = 0; i < data[0].groups.length; i++) {
if (data[0].groups[i].name.substr(0,4) == "LEAP") {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
It works as intended in FF and IE.