How can I let these code work on google chrome, I don't know why these code can work in ie and firefox, just can't work on google chrome. Help me modify them let them can use in google chrome and ie and firefox

index.html:

index.jg:

/** * start function */ function start() {

// get body element let body = document.getElementById("body"); body.style.textAlign = 'center';

// get user_id from cookie let userID = GetCookie('user_id'); let record;

// if userId is null, that is user is first visit. if(userID ==null){ // prompt user input name var name = prompt('Hello new user, enter your username. ',''); // put user_id in cookie SetCookie('user_id',name); record = document.createTextNode('Welcome to choose your favorite NBA player, '+name+ '! This is your first time here.'); } else { record = document.createTextNode('Welcome back to choose your favorite NBA player, '+userID); } // create h3 element let h3 = document.createElement('h3'); h3.style.fontSize = '30px'; // h3 append record h3.appendChild(record); // set attribute id h3.setAttribute("id", "title"); // add h3 in body body.appendChild(h3);

// create and append location select let location = createLocationSelect(["", 'EAST', 'WEST']); body.appendChild(location); animation(location); }

function animation(ele){ // get element's opacity let opacity = parseFloat(ele.style.opacity); // get element's margin top let marginTop = parseFloat(ele.style.marginTop); // add opacity for every step opacity += 1 / 100; // subtract margin top for every step marginTop -= 170 / 100; // if opacity is 1, that is the animation shoud be ended // set opacity ele.style.opacity = opacity; ele.style.marginTop = marginTop + 'px'; if(opacity >= 1){ ele.style.opacity = 1; ele.style.marginTop = '30px'; }else{ // else, continue animation setTimeout(function () { animation(ele); }, 10) } }

/** * create select element * @param menu */ function createLocationSelect(menu) { let div = document.createElement('div'); div.classList.add('card'); div.style.marginTop = '200px'; div.style.opacity = 0; div.setAttribute("id", "location");

// create label element let label = document.createElement('label'); let text = document.createTextNode('Choose The Location Of The NBA Team'); label.appendChild(text); div.appendChild(label);

// create select element let select = document.createElement('select'); menu.forEach(function (value, index) { select.options[index] = new Option(value, value); }); select.addEventListener('change', function () { let value = select.value;

// if select the first line, do nothing if(value === '') return;

// put the location in cookie SetCookie('location', value);

let team = null; if(value === 'EAST'){ team = createTeamSelect( ["", "Los Angeles Lakers", "Golden State Warriors", "Houston Rockets"]); }else if(value === 'WEST'){ team = createTeamSelect( ["", "Boston Celtics", "Chicago Bulls", "Miami Heat"]); } // if the team select already exist, delete it let teamNode = document.getElementById('team'); if(teamNode != null){ teamNode.parentElement.removeChild(teamNode); }

body.appendChild(team); animation(team); }); // add select in div div.appendChild(select); return div; }

/** * create team select * @param menu The team list */ function createTeamSelect(menu) { let div = document.createElement('div'); div.classList.add('card'); div.style.marginTop = '200px'; div.style.opacity = 0; div.setAttribute("id", "team");

// create label element let label = document.createElement('label'); let text = document.createTextNode('Choose Your favorite team'); label.appendChild(text); div.appendChild(label);

// create select element let select = document.createElement('select'); menu.forEach(function (value, index) { select.options[index] = new Option(value, value); }); select.addEventListener('change', function () { let value = select.value;

// if select the first line, do nothing if(value === '') return;

// put the team in cookie SetCookie('team', value);

let player = null; if(value === 'Los Angeles Lakers'){ player = createPlayerSelect(["", "LeBron James","Kobe Bryant","Earvin Johnson"]); }else if(value === 'Golden State Warriors'){ player = createPlayerSelect(["", "Stephen Curry","Klay Thompson","Kevin Durant"]); }else if(value === 'Houston Rockets'){ player = createPlayerSelect(["", "James Harden","Yao Ming","Chris Paul"]); }else if(value === 'Boston Celtics'){ player = createPlayerSelect(["", "Kyrie Irving","Paul Pierce","Larry Bird"]); }else if(value === 'Chicago Bulls'){ player = createPlayerSelect(["", "Michael Jordan","Scottie Pippen","Derrick Rose"]); }else if(value === 'Miami Heat'){ player = createPlayerSelect(["", "Dwyane Wade","Alonzo Mourning","Tim Hardaway"]); } // if the player select already exist, delete it let playerNode = document.getElementById('player'); if(playerNode != null){ playerNode.parentElement.removeChild(playerNode); }

body.appendChild(player); animation(player); }); // add select in div div.appendChild(select); return div; }

function createPlayerSelect(menu){ let div = document.createElement('div'); div.classList.add('card'); div.style.marginTop = '200px'; div.style.opacity = 0; div.setAttribute("id", "player");

// create label element let label = document.createElement('label'); let text = document.createTextNode('Choose Your Favorite Player'); label.appendChild(text); div.appendChild(label);

// create select element let select = document.createElement('select'); menu.forEach(function (value, index) { select.options[index] = new Option(value, value); }); select.addEventListener('change', function () { let value = select.value;

// if select the first line, do nothing if(value === '') return;

// put the team in cookie SetCookie('player', value);

let btn = document.createElement('button'); btn.style.marginTop = '200px'; btn.style.opacity = 0; btn.setAttribute("id", "submitBtn");

let buttonText = document.createTextNode("Submit Your Chose"); btn.appendChild(buttonText);

btn.onclick = function(){ // show your choose showMyChose(); }; body.appendChild(btn); animation(btn); }); // add select in div div.appendChild(select); return div; }

/** * delete all child element of body, then create and show your chose */ function showMyChose() { // set body's style overflow is auto, prevent the content hidden body.style.overflow = 'auto';

// delete that three select element and one button from body let location = document.getElementById('location'); let team = document.getElementById('team'); let player = document.getElementById('player'); let submitBtn = document.getElementById('submitBtn');

body.removeChild(location); body.removeChild(team); body.removeChild(player); body.removeChild(submitBtn);

// show information you chose

// create top div named info let info = document.createElement('div'); info.classList.add('info');

// create images container named imgs let imgs = document.createElement('div'); imgs.classList.add('imgs'); info.appendChild(imgs);

// create team image element let teamImg = document.createElement('img'); teamImg.classList.add('team'); // get team name from cookie let teamSrc = GetCookie('team'); // set attribute teamImg.setAttribute('src', './pic/' + teamSrc + '.jpg'); imgs.appendChild(teamImg);

// create player image element let playerImg = document.createElement('img'); playerImg.classList.add('player'); // get team name from cookie let playerSrc = GetCookie('player'); // set attribute playerImg.setAttribute('src', './pic/' + playerSrc + '.jpg'); imgs.appendChild(playerImg);

// create p element for display location information let locationInfo = document.createElement('p'); // get location from cookie let locationText = GetCookie('location'); let locationTextNode = document.createTextNode('Location:' + locationText); locationInfo.appendChild(locationTextNode); info.appendChild(locationInfo);

// create p element for display team information let teamInfo = document.createElement('p'); let teamTextNode = document.createTextNode('Team:' + teamSrc); teamInfo.appendChild(teamTextNode); info.appendChild(teamInfo);

// create p element for display player information let playerInfo = document.createElement('p'); let playerTextNode = document.createTextNode('Player:' + playerSrc); playerInfo.appendChild(playerTextNode); info.appendChild(playerInfo);

// create and append a button for redo the choose let redoBtnText = document.createTextNode("Make a new choose"); let redoBtn = document.createElement("button"); redoBtn.appendChild(redoBtnText); redoBtn.onclick = function () { // clear this information and restart body.removeChild(info); let h3 = document.getElementById("title"); body.removeChild(h3); body.style.overflow = "hidden"; start(); }; info.appendChild(redoBtn); body.appendChild(info); }

cookies.js:

// cookies.js // You can use this code for your projects! // Derived from the Bill Dortch code at http://www.hidaho.com/cookies/cookie.txt

var today = new Date(); //expires in a year.... var expiry = new Date(today.getTime() + 365 * 24 * 60 * 60 * 1000);

function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) { endstr = document.cookie.length; } return unescape(document.cookie.substring(offset, endstr)); }

function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) { return getCookieVal (j); } i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; }

function DeleteCookie (name,path,domain) { if (GetCookie(name)) { document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT"; } }

function SetCookie (name,value,expires,path,domain,secure) { document.cookie = name + "=" + escape (value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : ""); }