Javascript: функция возвращает неожиданный результат

Question

Im пытается получить эту функцию для печати 4 разных флагов. Это не дает мне и сообщения об ошибках, когда я запускаю его больше, но он также не печатает мои флаги. И теперь у меня не хватало идей, чтобы попытаться реально помочь.

(function() { 
    'use strict'; 
    function draw() { 
     for (var draw = 0; draw < v.length; draw++) flagTarget.init() 
    } 

    var flagTargetElfenbenskusten =document.getElementById('flag-elfenbenskusten'); 
    var flagTargetSverige =document.getElementById('flag-sverige'); 
    var flagTargetMaruritius =document.getElementById('flag-maruritius'); 
    var flagTargetJapan =document.getElementById('flag-japan'); 


    var flagTarget = { 
     init: function() { 
      if (flagTargetElfenbenskusten) { 
       var flagElfenbenskusten = '<div class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'; 
       console.log('drawing flag elfenbenskusten'), 
       flagTargetElfenbenskusten.innerHTML = flagElfenbenskusten; 
      } 
      if (flagTargetSverige) { 
       var flagSverige = '<div class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'; 
       console.log('drawing flag Sverige'), 
       flagTargetSverige.innerHTML = flagSverige; 
      } 
      if (flagTargetMaruritius) { 
       var flagMaruritius = '<div class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'; 
       console.log('drawing flag Maruritius'), 
       flagTargetMaruritius.innerHTML = flagMaruritius; 
      } 
      if (flagTargetJapan) { 
       var flagJapan = '<div class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'; 
       console.log('drawing flag japan'), 
       flagTargetJapan.innerHTML = flagJapan; 
      } 
     } 
    }, 

    flagTargetElfenbenskusten = Object.create(flagTarget), 
    flagTargetSverige = Object.create(flagTarget), 
    flagTargetMaruritius = Object.create(flagTarget), 
    flagTargetJapan = Object.create(flagTarget), 

    v = [ 
     flagTargetElfenbenskusten, 
     flagTargetSverige, 
     flagTargetMaruritius, 
     flagTargetJapan, 
     ]; 

    draw(), 
    console.log('Sandbox is ready!') 
}()); 

Это мой результат в консоли. Я не понимаю, почему он работает 4 раза.

drawing flag elfenbenskusten 
drawing flag Sverige 
drawing flag Maruritius 
drawing flag japan 
drawing flag elfenbenskusten 
drawing flag Sverige 
drawing flag Maruritius 
drawing flag japan 
drawing flag elfenbenskusten 
drawing flag Sverige 
drawing flag Maruritius 
drawing flag japan 
drawing flag elfenbenskusten 
drawing flag Sverige 
drawing flag Maruritius 
drawing flag japan 
Sandbox is ready! 

Любая помощь приветствуется!

Answer 1

Проблема в том, что вы всегда печатаете результат (4 раза) в своем цикле, потому что ваш тест: if (flagTargetElfenbenskusten) всегда будет true (Таким образом, условия всегда будут правдой).

Потому что вы проверяете, если переменные не являются недействительными и не равны нулю (дивы существует в DOM), вы должны изменить свой код так:

var flagTargetElfenbenskusten =document.getElementById('flag-elfenbenskusten')textContent; // add textContent to get the value of the inputs 
//do the same with the 4 variables 

И ваш код должен быть :

if (flagTargetElfenbenskusten!==null) { 
    // your code goes here 

Также не установлен идентификатор к вашей диве, окончательный код должен быть:

EDIT 2:

(function() { 
'use strict'; 
function draw() { 
    for (var draw = 0; draw < v.length; draw++) flagTarget.init() 
} 

var flagTargetElfenbenskusten =document.getElementById('flag-elfenbenskusten').textContent; 
var flagTargetSverige =document.getElementById('flag-sverige').textContent; 
var flagTargetMaruritius =document.getElementById('flag-maruritius')textContent; 
var flagTargetJapan =document.getElementById('flag-japan').textContent; 


var flagTarget = { 
    init: function() { 
     if (flagTargetElfenbenskusten !== null) { 
      var flagElfenbenskusten = '<div id="flag-elfenbenskusten" class="flag elfenbenskusten"><div class="part1"></div><div class="part2"></div></div>'; 
      console.log('drawing flag elfenbenskusten'), 
      flagTargetElfenbenskusten.innerHTML = flagElfenbenskusten; 
     } 
     if (flagTargetSverige !== null) { 
      var flagSverige = '<div id="flag-sverige" class="flagga1 sverige"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>'; 
      console.log('drawing flag Sverige'), 
      flagTargetSverige.innerHTML = flagSverige; 
     } 
     if (flagTargetMaruritius !== null) { 
      var flagMaruritius = '<div id="flag-maruritius" class="flagga2 maruritius"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div></div>'; 
      console.log('drawing flag Maruritius'), 
      flagTargetMaruritius.innerHTML = flagMaruritius; 
     } 
     if (flagTargetJapan !== null) { 
      var flagJapan = '<div id="flag-japan" class="flagga3 japan"><div class="box1"></div><div class="cirkel1"></div></div>'; 
      console.log('drawing flag japan'), 
      flagTargetJapan.innerHTML = flagJapan; 
     } 
    } 
}, 

flagTargetElfenbenskusten = Object.create(flagTarget), 
flagTargetSverige = Object.create(flagTarget), 
flagTargetMaruritius = Object.create(flagTarget), 
flagTargetJapan = Object.create(flagTarget), 

v = [ 
    flagTargetElfenbenskusten, 
    flagTargetSverige, 
    flagTargetMaruritius, 
    flagTargetJapan, 
    ]; 

draw(), 
console.log('Sandbox is ready!') 
}()); 

Вы использовали getElementById() и у вас нет ни одной из этих идентификаторов.

Вам не нужно для цикла в функции, измените его следующим образом:

function draw() { 
    flagTarget.init() 
} 

РЕДАКТИРОВАНИЕ 3:

И добавить вызов метода инициализации в загрузке страницы в создать дивы флаг:

window.addEventListener("load", flagTarget.init()); 

Answer 2

1. в функции draw вы называете init функция 4x
2. в функции init вы передаете все 4 условия