Building string iteratively, using concat or +=

Hey everyone.

Down to the last sticky problem on my Random quote generator.
Got my Twitter button working, except that the string I’m returning is staying undefined. Problem appears to be in line 85 where I’m attempting to rebuild the quote string for tweeting after checking for length and trimming if required.

Have tried += and now the String.concat() method. Any thoughts?

Thanks! – Shirley

Hi Shirley,

That seems like an awful lot of work for getting a portion of a string (but kudos for creativity and determination!). I can’t count how many times I’ve implemented something only to later find out a method exists that does just that.

Which brings me to …

Have you looked into:

String.prototype.slice();

Much like with Array.prototype.slice() taking a portion of an array, it lets you take a portion of a string.

Then it’s a matter of checking the length of your string and returning only a portion if > 140 or returning the entire string if not.


const tweet = (quote.length > 140 ) ? quote.slice( 0, 139 ) : quote;

I highly recommend the documentation on MDN … I often browse it just for the sake of curiosity. Then, when I’m faced with a problem later, I may not know the exact syntax of something, but I have an idea of tools I might use to get the job done!

I hope this helps a bit.

~Micheal

1 Like

I’m using String.slice earlier in the code. The reason for using the concat (or +) was to rebuild a portion of the source quote to fit the Tweet.

It’s this close to working. I’m getting either undefined when I call the string for the tweet or object (if I use the $ slgn) I’ve been attempting to figure out what is stopping the concatenation on the loop.

So you want only complete sentences and only if they are less than 140? Is that right?

It took me a bit of reading to sort things out (but that’s good practice for me - I usually only read my own code).

Right now, the way you have things setup is considered a “bad practice” - that is, putting event handlers right in your HTML. That mixes HTML (content) and Javascript (behavior), plus you can only have one function per element handler that way. It’s usually better to use addEventListener in your Javascript which will listen for clicks to elements and respond to those. (and you can have more that one handler bound, in cases where that is needed).

I mention this not only because it is considered “bad practice” but because it is also the source of your problem.

I stepped through your function for building the quote string - it works fine, actually. The issue is that you have the whenClicked function bound to the button click and the dynamicURL function bound to the anchor click.

But your dynamicURL function expects an argument - the combined string produced by whenClicked. But it receives no argument when bound the way you have it. Thus, your undefined value.

addEventListener on MDN

This should really be handled with one addEventListener in your Javascript - bind it to the quote button. Inside the event handler, run the whenClicked function to build the string, pass the results of that function into your dynamicURL function. This will update the anchor url everything should work (in fact, I know it work sbecause I modified your pen and it works just fine).

If you want to see what I did, the code looks like this:

I added an ID of ‘quoteButton’ to your bad ass technical woman button to make it easy to select. I deleted the click handlers from the HTML.

Then I bound a click handler to the button.

document.getElementById( 'quoteButton' ).addEventListener( 'click', function(){
  dynamicURL( whenClicked() );
});

And that’s it! You are very close.

Other notes:
You have a stray ‘v’ on a commented line that is causing an error.
You don’t have jQuery on your page, but you do have bootstrap. Bootstrap needs jquery and it’s throwing an exception.

Using the development console (F12) in your browser will help spot errors like that. Also, you can use

debugger;

Statements inside the code to get the browser to pause execution. This way you can inspect values and step through instructions one by one to see what is happening. It’s extremely useful (I really can’t stress that enough) and really valuable to get the hang of.

Final note, your tweet building function is awfully involved. You could save yourself a lot of gymnastics by making sure your quotes in your quoteArray are just data (not markup) and then updating the markup in the page with the data (using properties like .text and .href).

That way you can use some simple array functions and str.length checking to build the tweets you are after.

That’s just another approach - your way works too! :slight_smile:

Hope all of this was worth the read!

Regards,
Micheal

1 Like

Thank you - Michael - appreciate the review. And the feedback regarding page structure.

1 Like

Regarding the question of string.concat vs += in a general sense:

MDN
It is strongly recommended that assignment operators (+, +=) are used instead of the concat() method. See this performance test.

+= >> string.concat >> array.join

1 Like