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> 
 

\$\endgroup\$
7
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
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.