CODEWITHSUNDEEP
javascriptjquerysvg
tomc
tomc

Reputation: 427

Concatenating integers and strings to a single string

I'm trying to concatenate a group of integers and strings into a single long string for use in an svg animation, however my output seems to result in an NaN result when I want something like M15, 140, L20, 34... etc.

HTML:

<div id="test"></div>

CSS:

#test {
    background-color: green;
    height: 150px;
    width: 150px;
}

JS:

var bubbleObj = function(el, html, cornerRad) {
    this.html = html,
    this.width = el.width(),
    this.height = el.height(),
    this.arrowWidth = el.width()/4,
    this.arrowHeight = el.height()/8,
    this.cornerRad = cornerRad;

    var pathy = "M" + 
        this.cornerRad
        + ", " +
        this.height - this.arrowHeight
        + ", Q" +
        0
        + ", " +
        this.height - this.arrowHeight
        + ", " +
        0
        + ", " +
        this.height - this.arrowHeight - this.cornerRad
        + ", L" +
        0 
        + ", " +
        this.cornerRad
        + ", Q" +
        0
        + ", " +
        0
        + ", " +
        this.cornerRad
        + ", " +
        0
        + ", L" +
        this.cornerRad + (this.width - (this.cornerRad * 2))
        + ", " +
        0
        + ", Q" +
        this.width 
        + ", " + 
        0 
        + ", " +
        this.width
        + ", " +
        this.cornerRad
        + ", L" +
        this.width
        + ", " +
        this.cornerRad + (this.height - this.arrowHeight - (this.cornerRad * 2))
        + ", Q" +
        this.width
        + ", " +
        this.height - this.arrowHeight
        + ", " +
        this.width - this.cornerRad
        + ", " +
        this.height - this.arrowHeight
        + ", L" +
        (this.width/2) + (this.arrowWidth/2)
        + ", " +
        this.height - this.arrowHeight
        + ", L" +
        this.width / 2
        + ", " +
        this.height
        + ", L" +
        (this.width/2) - (this.arrowWidth/2)
        + ", " +
        this.height - this.arrowHeight
        + ", " +            
        ", Z";

        console.log(pathy);
};        

    var bub = new bubbleObj($('#test'), "test_content", 15);

JSfiddle: http://jsfiddle.net/p9abkmwx/

Upvotes: 0

Views: 60

Answers (1)

Jos&#233; Antonio Riaza Valverde
Jos&#233; Antonio Riaza Valverde

Reputation: 747

Use brackets to prioritize all arithmetic operations.

var bubbleObj = function(el, html, cornerRad) {
    this.html = html,
    this.width = el.width(),
    this.height = el.height(),
    this.arrowWidth = el.width()/4,
    this.arrowHeight = el.height()/8,
    this.cornerRad = cornerRad;

    var pathy = "M" + 
    this.cornerRad
    + ", " +
    (this.height - this.arrowHeight)
    + ", Q" +
    0
    + ", " +
    (this.height - this.arrowHeight)
    + ", " +
    0
    + ", " +
    (this.height - this.arrowHeight - this.cornerRad)
    + ", L" +
    0 
    + ", " +
    this.cornerRad
    + ", Q" +
    0
    + ", " +
    0
    + ", " +
    this.cornerRad
    + ", " +
    0
    + ", L" +
    (this.cornerRad + (this.width - (this.cornerRad * 2)))
    + ", " +
    0
    + ", Q" +
    this.width 
    + ", " + 
    0 
    + ", " +
    this.width
    + ", " +
    this.cornerRad
    + ", L" +
    this.width
    + ", " +
    (this.cornerRad + (this.height - this.arrowHeight - (this.cornerRad * 2)))
    + ", Q" +
    this.width
    + ", " +
    (this.height - this.arrowHeight)
    + ", " +
    (this.width - this.cornerRad)
    + ", " +
    (this.height - this.arrowHeight)
    + ", L" +
    ((this.width/2) + (this.arrowWidth/2))
    + ", " +
    (this.height - this.arrowHeight)
    + ", L" +
    (this.width / 2)
    + ", " +
    this.height
    + ", L" +
    ((this.width/2) - (this.arrowWidth/2))
    + ", " +
    (this.height - this.arrowHeight)
    + ", " +            
    ", Z";

    console.log(pathy);
};        

var bub = new bubbleObj($('#test'), "test_content", 15);

Upvotes: 2

Related Questions