Javascript function is providing unexpected output

Question

Javascript function is providing unexpected output

I have a function that should display 4 different flags, but it's not working as expected. There are no error messages, but the flags are not being printed either. I've tried everything I could think of and now I'm stuck. Can someone please help me out?

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

    var flagTargetIvoryCoast = document.getElementById('flag-elfenbenskusten');
    var flagTargetSweden = document.getElementById('flag-sverige');
    var flagTargetMauritius = document.getElementById('flag-maruritius');
    var flagTargetJapan = document.getElementById('flag-japan');


    var flagTarget = {
        init: function () {
            if (flagTargetIvoryCoast) {
                var flagIvoryCoast = '<div class="flag ivory-coast"><div class="part1"></div><div class="part2"></div></div>';
                console.log('drawing flag Ivory Coast'),
                flagTargetIvoryCoast.innerHTML = flagIvoryCoast;
            }
            if (flagTargetSweden) {
                var flagSweden = '<div class="flag1 sweden"><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></div>';
                console.log('drawing flag Sweden'),
                flagTargetSweden.innerHTML = flagSweden;
            }
            if (flagTargetMauritius) {
                var flagMauritius = '<div class="flag2 mauritius"><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 Mauritius'),
                flagTargetMauritius.innerHTML = flagMauritius;
            }
            if (flagTargetJapan) {
                var flagJapan = '<div class="flag3 japan"><div class="box1"></div><div class="cirkel1"></div></div>';
                console.log('drawing flag Japan'),
                flagTargetJapan.innerHTML = flagJapan;
            }
        }
    },

    flagTargetIvoryCoast = Object.create(flagTarget),
    flagTargetSweden = Object.create(flagTarget),
    flagTargetMauritius = Object.create(flagTarget),
    flagTargetJapan = Object.create(flagTarget),

    v = [
        flagTargetIvoryCoast,
        flagTargetSweden,
        flagTargetMauritius,
        flagTargetJapan,
        ];

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

My console output shows the flags being drawn multiple times, and I can't figure out why. Any assistance would be greatly appreciated!

javascript

Answer 1

Answer №1

You may be facing an issue where you are constantly outputting the result (4 times) within your loop due to the fact that your condition: if (flagTargetElfenbenskusten) will always evaluate to true (resulting in the conditions always being met).

Since you are checking for variables not being null and they are indeed not null (the divs exist in the DOM), you should update your code as follows:

 var flagTargetElfenbenskusten = document.getElementById('flag-elfenbenskusten').textContent; // include textContent to retrieve input values
// repeat the same for the other 4 variables

Your updated code should look like this:

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

Additionally, it seems you haven't assigned any IDs to your div elements, so your final code should appear as follows:

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

You were using getElementById() without specifying any corresponding IDs.

The for loop inside your function is unnecessary, modify it as shown below:

function draw() {
    flagTarget.init()
}

EDIT 3:

Remember to call the init method on page load to generate the flag divs:

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

Answer 2

You may be facing an issue where you are constantly outputting the result (4 times) within your loop due to the fact that your condition: if (flagTargetElfenbenskusten) will always evaluate to true (resulting in the conditions always being met).

Since you are checking for variables not being null and they are indeed not null (the divs exist in the DOM), you should update your code as follows:

 var flagTargetElfenbenskusten = document.getElementById('flag-elfenbenskusten').textContent; // include textContent to retrieve input values
// repeat the same for the other 4 variables

Your updated code should look like this:

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

Additionally, it seems you haven't assigned any IDs to your div elements, so your final code should appear as follows:

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

You were using getElementById() without specifying any corresponding IDs.

The for loop inside your function is unnecessary, modify it as shown below:

function draw() {
    flagTarget.init()
}

EDIT 3:

Remember to call the init method on page load to generate the flag divs:

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

Answer 3

Answer №2

within the render method, you invoke the initialize function 4 times
all four conditions are met within the initialize function

Answer 4

within the render method, you invoke the initialize function 4 times
all four conditions are met within the initialize function

Javascript function is providing unexpected output

Answer №1

Answer №2

Similar questions

JavaScript Code to Remove an Element from an Array

Utilizing AngularJS to make an API call with $http method and handling a

Receiving an error while trying to install packages from the NPM registry due to non

Javascript - parsing a string to create a mathematical equation

Styling an exponential number in a table header using Vuetify

React: Component styles fail to update dynamically

Tips for extracting data from a website that dynamically updates its content as the user scrolls

Is transforming lengthy code into a function the way to go?

Is it possible to assign a deconstructed array to a variable and then further deconstruct it?

Creating an app using Ionic 1 that features scrollable tabs with the ability to handle overflow

What mechanisms do frameworks use to update the Document Object Model (DOM) without relying on a

Creating a Future Prediction Graph with ECharts

The error message "Node.js is throwing a next() error that is not a

A method for modifying the key within a nested array object and then outputting the updated array object

Switching out text when hovering with Jquery or JavaScript

Unable to fetch a new session from the selenium server due to an error

What is the correct way to show a JavaScript response on the screen?

Tips for ensuring a successful POST request using a hyperlink tag

The abort() function in Chrome can trigger an Undefined Error

Tips for sending a MySQL parameter