Switching to the new function writing format

Question

I wrote functions in this format: function myfunction () { }

but when we write a function in this format: myfunction = () => { }

the function does not work

how to switch functions to this other format myfunction = () => { }

function generateQuestion(id_x) {

  pitanje.innerHTML = "";
  answers.innerHTML = "";
  scoremessage.innerHTML = "";

  if (id_x === questions.length) {
    pitanje.innerHTML = "Vas rezultat je:" + score;
    return;
  }
  var pitanja = questions[id_x];
  pitanje.innerHTML = pitanja.question;
  var correctAnswer = pitanja.answer;
  for (var i = 0; i < pitanja.answers.length; i++) {
    var answer = pitanja.answers[i];
    var odgovaranje = document.createElement('div');
    odgovaranje.setAttribute("class", "coluum");
    odgovaranje.innerHTML = answer;
    odgovaranje.style.cursor = 'pointer';
    if (answer === correctAnswer) {
      odgovaranje.addEventListener('click', nextQuestion);
    } else {
      odgovaranje.addEventListener('click', wrongAnswer);
    }
    answers.appendChild(odgovaranje);
  }
}

the function does not work

generateQuestion = (id_x) => {

  pitanje.innerHTML = "";
  answers.innerHTML = "";
  scoremessage.innerHTML = "";

  if (id_x === questions.length) {
    pitanje.innerHTML = "Vas rezultat je:" + score;
    return;
  }
  var pitanja = questions[id_x];
  pitanje.innerHTML = pitanja.question;
  var correctAnswer = pitanja.answer;
  for (var i = 0; i < pitanja.answers.length; i++) {
    var answer = pitanja.answers[i];
    var odgovaranje = document.createElement('div');
    odgovaranje.setAttribute("class", "coluum");
    odgovaranje.innerHTML = answer;
    odgovaranje.style.cursor = 'pointer';
    if (answer === correctAnswer) {
      odgovaranje.addEventListener('click', nextQuestion);
    } else {
      odgovaranje.addEventListener('click', wrongAnswer);
    }
    answers.appendChild(odgovaranje);
  }
}

What Error do you see in browser? What is not working. Please add some details — nircraft, Sep 20 '19 at 18:07
how does it not work? can you not call the function? is there a specific line that errors out? — Phillip, Sep 20 '19 at 18:07
You don't need to convert all your functions, there are not better, just different — Sebastian Speitel, Sep 20 '19 at 18:09
https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable Arrow functions are not "the new way" of writing functions. Arrow functions are distinctly different from functions. They are not 100% interchangable — Taplar, Sep 20 '19 at 18:09
@nircraft The function does not work! when I write a function in this format that I wrote above then the function does not work at all — Bobyy, Sep 20 '19 at 18:11
From your jsfiddle, the problem is most probably that you're trying to use an arrow function before it is declared, arrow functions are like normal variables, you can only use them after they've been declared and initialised. — Titus, Sep 20 '19 at 18:11

nircraft · Accepted Answer · 2019-09-20T18:25:22.187

I moved this up in your code and it worked, It's not working because you are trying to call generateQuestion(currentQuestion); before defining it.

After a function expression has been stored in a variable, the variable can be used as a function. Functions stored in variables do not need function names. The function's name doesn't get hoisted if it is part of a function expression.

var pitanje = document.getElementById('question');
var restart = document.getElementById('reset');
var currentQuestion = 0;
var score = 0;

var questions = [
 {
  question: "Best internet service provider is:",
    answers: ["DSLON WIRELESS","BH Telecom","Gigaherc","TELESKY"],
    answer: "DSLON WIRELESS"
 },
  {
  question: "Bad internet service provider is:",
    answers: ["BH Telecom","TELESKY","Gigaherc","DSLON WIRELESS"],
    answer: "Gigaherc"
 },
  {
  question: "What is the name of the President of Russia?",
    answers: ["Donald Trump","Vladimir Vladimirovich Putin","Barack Obama","Bakir Izetbegovic"],
    answer: "Vladimir Vladimirovich Putin"
 }
];

const nextQuestion = ()=> {
  currentQuestion++;
  score ++;
  generateQuestion(currentQuestion);
}
const wrongAnswer = ()=> {
 alert('Odgovor nije tacan,igra krece ponovno!');
  resetGame();
}

var generateQuestion = (id_x) =>  {

  pitanje.innerHTML = '';
  
 if (id_x === questions.length) {
   pitanje.innerHTML = "Vas rezultat je:" + score;
   return;
  }
 var pitanja = questions[id_x];
 pitanje.innerHTML = '<b>' + pitanja.question + '</b>';  
  var correctAnswer = pitanja.answer;
  for (var i = 0; i < pitanja.answers.length; i++) {
   var answer = pitanja.answers[i];
   var odgovaranje = document.createElement('LI');
    odgovaranje.innerHTML = answer;
    odgovaranje.style.cursor = 'pointer';    
    if (answer === correctAnswer) {
     odgovaranje.addEventListener('click', nextQuestion);
    } else {
     odgovaranje.addEventListener('click', wrongAnswer);
    }
    
    pitanje.appendChild(odgovaranje);
  }
}



resetGame =  () => {
 currentQuestion = 0;
  score = 0;
  generateQuestion(currentQuestion);
  alert("igra je ponovno krenula");
}

generateQuestion(currentQuestion);
restart.addEventListener('click', resetGame);

<div id="question"></div>
<button id="reset">Reset game</button>

Anki · Answer 2 · 2019-09-20T18:21:19.477

0

Please, check the fiddle page https://jsfiddle.net/oefryxmk/1/ I have updated the code and it works. The problem was that you were calling

        generateQuestion(currentQuestion);

above and I have pasted it at the bottom. And the reason is that

Function expressions in JavaScript are not hoisted, unlike function declarations. You can't use function expressions before you define them

edited Sep 20 '19 at 18:21

answered Sep 20 '19 at 18:15

Anki

67
1
12

Switching to the new function writing format

2 Answers2