0
\$\begingroup\$

Here i have javascript code where is 'animals' object and 'people' array of objects. User selects the data from select box and accordingly table fills with selected data(which is array of objects) and when user wants to reset everything to the state before selected data, user just clicks 'backtozero' button. the code is a little complicated to understand for beginners specially two 'for loops'(i know foreach but maybe someting else ?) and also information which is inside of 'addEventListeners function' any suggestion for making whole thing easier to read for beginners ? feel free to make changes : 

let animals 
let animalCols = ['Animal', 'Animal 2'] 
let peopleCols = ['Person', 'Person 2'] 
 
function myFunction() { 
 paivitys(animals, animalCols) 
} 
 
function paivitys(dataa, arvvoja) { 
 console.log(dataa); 
 //---- 
 if (dataa.hasOwnProperty("animal")) { 
 document.getElementById("1name").innerHTML = dataa.animal; 
 } else { 
 document.getElementById("1name").innerHTML = dataa.person; 
 } 
 //---- 
 if (dataa.hasOwnProperty("animal2")) { 
 document.getElementById("2name").innerHTML = dataa.animal2; 
 } else { 
 document.getElementById("2name").innerHTML = dataa.person2; 
 
 } 
 
 document.getElementById("1name1").innerHTML = arvvoja[0]; 
 document.getElementById("2name1").innerHTML = arvvoja[1]; 
 
 //----- 
 document.getElementById("id").innerHTML = dataa.id; 
} 
 
function paivitaselekt(araytassa, arvvoja) { 
 
var i, j;
for (i = 0; i < araytassa.length; i++) { 
 var ssellecct = document.getElementById("Select"); 
 var oppttion = document.createElement("option"); 
 for (j = 0; j < arvvoja.length; j++) { 
 oppttion.textContent += araytassa[i][arvvoja[j]] + " "; 
 } 
 ssellecct.appendChild(oppttion); 
} 
} 
 
animals = { 
 "animal": "tiger", 
 "animal2": "lion", 
 "id": "54321", 
 "dole": { 
 "Key": "fhd699f" 
 } 
} 
 
paivitys(animals, animalCols); 
let infoarray; 
 
people = [{ 
 "person": "kaka", 
 "person2": "julle", 
 "id": "9874", 
 }, 
 { 
 "person": "Ronaldo", 
 "person2": "jussi", 
 "id": "65555", 
 } 
] 
infoarray = people; 
paivitaselekt(infoarray, ["person", "id"]); 
 
document.getElementById("Select").addEventListener("change", function(event) { 
 const chosenid = event.target.value.split(" ")[1]; 
 const choseninfo = infoarray.filter((dataa) => dataa.id === chosenid)[0]; 
 paivitys(choseninfo, peopleCols); 
}); 
<!DOCTYPE html> 
<html lang="en"> 
 <head> 
 <meta charset="UTF-8" /> 
 <meta name="viewport" content="width=device-width" /> 
 <link 
 rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
 /> 
 <link 
 rel="stylesheet" 
 href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" 
 integrity="sha384UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" 
 crossorigin="anonymous" 
 /> 
 <style> 
 
 </style> 
 </head> 
 <body> 
 
<div class=""> 
 <table class="table "> 
 <thead> 
 <tr> 
 <th id="1name1" class="table-success">Animal</th> 
 <th id="2name1" class="table-success">Animal</th> 
 <th class="table-success">id</th> 
 </tr> 
 </thead> 
 <tbody> 
 <th id="1name"></th> 
 <th id="2name"></th> 
 <th id="id"></th> 
 </tbody> 
 </table> 
 
 <select id="Select" ></select> 
 <button onclick="myFunction()">backtozero</button> 
</div> 
 </body> 
</html>

konijn
34.2k5 gold badges70 silver badges267 bronze badges
asked Apr 28, 2020 at 15:54
\$\endgroup\$
7
  • 1
    \$\begingroup\$ codereview.stackexchange.com/q/240745 ?? \$\endgroup\$ Commented Apr 28, 2020 at 20:30
  • 2
    \$\begingroup\$ Does this answer your question? Suggestion for improving this code to be more readable and easy for beginners? \$\endgroup\$ Commented Apr 28, 2020 at 20:31
  • 2
    \$\begingroup\$ Better to edit the earlier identical question to make it clearer rather than to post a new one \$\endgroup\$ Commented Apr 28, 2020 at 21:44
  • \$\begingroup\$ (You could try and use a spelling checker.) \$\endgroup\$ Commented Apr 29, 2020 at 5:15
  • 1
    \$\begingroup\$ @Peilonrayz Yes, but the proper way to handle this would be for the original question to be improved with the updates and go through the reopen process. \$\endgroup\$ Commented Apr 29, 2020 at 13:06

1 Answer 1

4
\$\begingroup\$
  • Indent your code!

  • Naming convention

    • Only use English
      • paivitys -> update -> though really this should be with a subject, so updateObjekt?
      • dataa -> data
      • arvvoja -> values
      • paivitaselekt -> updateSelection
    • Dont mispel
      • ssellecct -> selectElement
      • oppttion -> option

    • Use lowerCamelCase

      • infoarray -> infoArray
      • chosenid -> chosenId
      • choseninfo -> chosenInfo

    • myFunction -> this is an unfortunate name, it does not say anything about its functionality

    • The names of your HTML elements id's can be improved
  • Dont mix var and const/let
  • Don't console.log() in production code
  • Comments should improve understanding, //------ does not do that, just use newlines/whitespace
  • Dont assign onclick events in html with onclick, use addEventLister()
  • It seems people is a global variable, don't create global variables
  • It seems you create people and infoarray, then assign people to infoarray, and then never use people again. It does not seem to make sense
answered Apr 28, 2020 at 16:34
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.