Javascript:函数正在返回意外结果

我试图让这个函数打印出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次），因为您的测试：

if（flagTargetElfenbenskusten）

将始终为

true

（因此条件将始终为true）

因为您正在测试变量是否为null，并且它们是否为null（DOM中存在div），所以您必须如下更改代码：

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

function draw() {
    flagTarget.init()
}

您的代码应该是：

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

此外，您尚未为div设置任何id，最终代码应为：

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

编辑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!')
}());

编辑3:

(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!')
}());

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

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

在

draw

函数中，调用

init

函数4x

在

init

函数中，您可以传递所有4个条件

---

函数名和变量名相同。谈到阅读时的困惑。你在for循环中调用init（），所以我猜你在

v

中有for，console.log（flagTargetJapan）给你什么，把它放在

var flagTargetJapan=…

？@bloodyKnuckles后面，我从一开始就把它们放在那里，看看函数是否失败。我对javascript还是很陌生。我可以看出这还不清楚。我的意思是，告诉我们输出是什么。我想知道，例如，

document.getElementById（'flag-japan'）

是否正在查找要写入的DOM元素。您是否使用了所有变量？好的，看看我的编辑，我发布了最终代码，您必须使用

.textContent

而不是.value，因为yopu使用的是div而不是输入，我认为这解决了问题。它打印什么？你们在控制台里得到了什么？和我在帖子里得到的结果一样。allIn没有变化如果你不需要函数中的for循环，看看我的编辑。