Question

我试图让这个功能打印出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（所以条件总是如此）。

因为您正在测试变量是否为空并且它们不为空（div中存在div），您必须像这样更改代码：

 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

此外，您还没有为您的div设置任何ID，您的最终代码应为：

编辑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()，而且您没有任何这些ID。

你不需要在你的函数中使用for循环，改变它：

function draw() {
    flagTarget.init()
}

编辑3：

在页面加载中添加对init方法的调用以创建标志div：

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

Answer 2

在draw函数中，您调用init函数4x
在您通过所有4个条件的init函数中

Javascript：函数返回意外结果

2 个答案: