Check for substring in element using javascript

Question

I'm having trouble looking at an H1 tag and then populating an empty div with an image based upon the contents of said H1. My code is as follows:

// DECLARE MEASURMENT STEP IMAGES
var CornerRight = "../product_images/uploaded_images/onecutcornerrightstep2.gif";
var CornerLeft = "../product_images/uploaded_images/onecutcornerleftstep2.gif";
var CutCorners = "../product_images/uploaded_images/cutcornerssquareorrectanglestep2.gif";
var Rounded = "../product_images/uploaded_images/roundedsquareorrectanglestep2.gif";
var TwoCut = "../product_images/uploaded_images/2cutcornersstep2.gif";
var Round = "../product_images/uploaded_images/roundstep2.gif";
var Octagon = "../product_images/uploaded_images/octogonstep2.gif";
var SquareOrRectangle = "../product_images/uploaded_images/squareorrectanglestep2.gif";

// PLACE IMAGES
if ($( ".product h1:contains('Corner Right')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CornerRight + "\" />");
} else if ($( ".product h1:contains('Corner Left')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CornerLeft + "\" />");
} else if ($( ".product h1:contains('Cut Corners')" )) {
    $( ".measurement-image" ).append("<img src=\"" + CutCorners + "\" />");
} else if ($( ".product h1:contains('Rounded')" )) {
    $( ".measurement-image" ).append("<img src=\"" + Rounded + "\" />");
} else if ($( ".product h1:contains('Two Cut')" )) {
    $( ".measurement-image" ).append("<img src=\"" + TwoCut + "\" />");
} else if ($( ".product h1:contains('Octagon')" )) {
    $( ".measurement-image" ).append("<img src=\"" + Octagon + "\" />");
} else if ($( ".product h1:contains('Square or Rectangle')" )) {
    $( ".measurement-image" ).append("<img src=\"" + SquareOrRectangle + "\" />");
} else {
    $( ".measurement-image" ).append("<img src=\"" + Round + "\" />");
}

Every time I run it, the first condition (Corner Right) comes back as true, regardless of the actual contents of the H1.

have you heard about objects and arrays? =/

Yaron U.
– Yaron U.

2014-04-20 20:04:35 +00:00
Commented Apr 20, 2014 at 20:04 — Yaron U.
– Yaron U., Commented Apr 20, 2014 at 20:04

AlexZ · Accepted Answer · 2014-04-20 20:01:59Z

As @linstantnoodles said, you are just checking if an array exists, NOT if that array has elements inside it

Also, why not reduce the number of variables and make a single object containing all the checks? Here's my proposed reworking:

var measureSteps = [
    cornerRight: {
        name: "Corner Right",
        src: "../product_images/uploaded_images/onecutcornerrightstep2.gif";
    },
    cornerLeft: {
        name: "Corner Left",
        src: "../product_images/uploaded_images/onecutcornerleftstep2.gif";
    },
    cornerRight: {
        name: "Cut Corners",
        src: "../product_images/uploaded_images/cutcornerssquareorrectanglestep2.gif";
    },
    /* ETC, ETC */
];

//Iterate through each value in the "measureSteps" object, checking if it is contained in h1
var headerText = $('.product h1').text(); //Only do a jQuery matching search once
$.each(measureSteps, function(i, v) {
    if ( headerText.indexOf(v.name) > -1 ) {
        $( ".measurement-image" ).append("<img src='" + v.src + "' />");
        return false; //Stop iterating - we've successfully found the right text!
    }
});

linstantnoodles · Accepted Answer · 2014-04-20 19:48:48Z

0

You need to check the length of the result (array). All objects are truthy in JavaScript.

For example:

if ([]) {
  console.log("Hello");
}
// Prints "Hello"

answered Apr 20, 2014 at 19:48

linstantnoodles

4,4101 gold badge25 silver badges24 bronze badges

Collectives™ on Stack Overflow

Check for substring in element using javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related