Javascript:函数返回意外结果

Javascript: function is returning unexpected result

本文关键字：意外 结果 返回 函数 Javascript      更新时间：2023-09-26

我试图让这个函数打印出 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!

任何帮助不胜感激！

这里的问题是你总是在循环中打印结果（4 次），因为你的测试：if (flagTargetElfenbenskusten)将永远是true的（所以条件总是正确的）。

因为您正在测试变量是否不为 null 并且它们不为 null（div 存在于 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

此外，您还没有为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());
  1. 在 draw 函数中，您调用 init 函数 4x
  2. 在init函数中，您传递所有 4 个条件
相关文章：