www.webdeveloper.com
Results 1 to 11 of 11

Thread: Concat 2 strings?!?

  1. #1
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79

    Concat 2 strings?!?

    I would like to be able to concat 2 strings together and then display the array.
    Here's my array:

    Code:
    var fuitSalad = ["apple", "banana", "pear"];
    I would like to do something like this.
    Code:
    var temp = "fruit"+"Salad";
    alert(temp[0]);

    Here's my code but it doesn't work:
    HTML Code:
    <html>
    <head>
    
    <script language="javascript">
    var fuitSalad = ["apple", "banana", "pear"];
    var nuttySalad = ["almonds", "Cashew", "Chestnuts"];
    
    function SaladType(ch, num){
    	var temp = ch + "Salad";
    	document.getElementById("display").innerHTML = fruitSalad[num];
    }
    
    funtion init(){
    	SaladType("fuit", 0);
    	SaladType("nutty", 1);
    }
    </script>
    
    
    
    </head>
    <body onload="init()">
    	<div id="display" name="display"></div>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    865
    I feel some clarification is needed here. By looking at your code it seems you are trying to dynamically reference an array. You have 2 arrays (named fruitSalad and nuttySalad) and you want to reference these arrays by dynamically building the name (via concatenation of 'fruit'/'nutty' and 'Salad').

    Using the window object, you can access any global variables such as your arrays, and it can all be done using other dynamically generated variables (such as your concatenated strings).

    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<title>Dynamic Variable References via Concatenated Strings</title>
    	<script>
    		var fuitSalad = ["apple", "banana", "pear"];
    		var nuttySalad = ["almonds", "Cashew", "Chestnuts"];
    
    		function SaladType(ch, num) {
    			var temp = ch + "Salad";
    			document.getElementById("display").innerHTML = window[temp][num];
    		}
    
    		function init() {
    			SaladType("fuit", 0);
    			SaladType("nutty", 1);
    		}
    	</script>
    </head>
    <body onload="init()">
    
    	<div id="display" name="display"></div>
    	
    </body>
    </html>
    Keep in mind that when you run your function more than once, it overwrites the text in the 'display' <div>. I also may be wrong in what you were trying to achieve in which case I think I need some more details on what you want your result to be.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    May 2014
    Posts
    900
    I'm not quite sure I'm following what you are trying to do... though I suspect this might be better handled by an OBJECT. I'd probably also not use innerHTML since we were SUPPOSED to stop using it a decade ago... likewise your first call would override the second instance, did you mean to add instead of replace? and if you moved the script to the end of BODY you could skip the onload nonsense and just build an anonymous function instead. (as the DOM would exist at that point). I'd probably also throw some error responses on that function for good measure...

    Oh, and there is NO legitimate reason to put a name on a DIV -- in fact, by the specification DIV don't even HAVE a name property. -- The only attributes DIV has is the deprecated (meaning you have no business using it any time after 1997) ALIGN, as well as the common attributes of ID, CLASS, STYLE, TITLE, LANG and DIR.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	Dynamic Variable References via Concatenated Strings
    </title>
    
    </head><body>
    
    <div id="display"></div>
    
    <script type="text/javascript"><!--
    
    (function(){
    
    	var
    		display = document.getElementById('display'),
    		salads = {
    			Fruit : ['Apple', 'Banana', 'Pear'],
    			Nutty : ['Almonds', 'Cashew', 'Chestnuts']
    		};
    		
    	function nodeAdd(tagName, content, parent) {
    		var e = document.createElement(tagName);
    		if (content) e.appendChild(
    			typeof content == 'object' ? content : document.createTextNode(content)
    		);
    		if (parent) parent.appendChild(e);
    		return e;
    	}
    		
    	function saladType(type, item) {
    		if (salads[type]) {
    			nodeAdd('div', type + ' ' + salads[type][item], display);
    			return true;
    		} else return false;
    	}
    	
    	saladType('Fruit', 0);
    	saladType('Nutty', 1);
    	
    })();
    
    --></script>
    
    </body></html>
    Which should output:

    Fruit Apple
    Nutty Cashew

    Adds the text inside a DIV using the DOM instead of innerHTML, which runs faster and doesn't force a complete page reflow.

    Hope this helps.

  4. #4
    Join Date
    Oct 2013
    Posts
    484
    Interesting solutions.
    Quote Originally Posted by Sup3rkirby View Post
    Keep in mind that when you run your function more than once, it overwrites the text in the 'display' <div>.
    One could add another <div> (along with corresponding script changes) to display the second salad -- well, actually the first since the second overwrites it:
    HTML Code:
    <!doctype html>
    <html>
    <head>
    	<title>Dynamic Variable References via Concatenated Strings</title>
    	<script>
    		var fruitSalad = ["apple", "banana", "pear"];
    		var nuttySalad = ["almonds", "Cashew", "Chestnuts"];
    
    		function SaladType(ch, num, d) {
    			var temp = ch + "Salad";
    			d.innerHTML = window[temp][num];
    		}
    
    		window.onload=function() {
    			SaladType("fruit", 0, display);
    			SaladType("nutty", 1, display2);
    		}
    	</script>
    </head>
    <body>
    
    	<div id="display"></div>
    	<div id="display2"></div>
    
    </body>
    </html>
    Very slight changes to deathshadow's code for the OP's edumacation:
    Code:
    (function(d){
    
    	var	salads = {
    			Fruit : ['Apple', 'Banana', 'Pear'],
    			Nutty : ['Almonds', 'Cashew', 'Chestnuts']
    		};
    		
    	function nodeAdd(tagName, content, parent) {
    		var e = document.createElement(tagName);
    		if (content) e.appendChild(
    			typeof content == 'object' ? content : document.createTextNode(content)
    		);
    		if (parent) parent.appendChild(e);
    		return e;
    	}
    		
    	function saladType(type, item) {
    		if (salads[type]) {
    			nodeAdd('div', type + ' ' + salads[type][item], d);
    			return true;
    		} else return false;
    	}
    	
    	saladType('Fruit', 0);
    	saladType('Nutty', 1);
    	
    })(display);
    Note how var display = document.getElementById('display') was replaced (shown in red).

  5. #5
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79
    huh?!?
    I have no idea what you did deathshadow. I am totally confused on function nodeAdd() and saladType()
    If someone could decrypt those two functions, that would be great.

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    865
    Well first it's worth noting he converted your two arrays into an object. So you now have an object with two keys (Fruit and Nutty), each with their respective arrays (making things more organized and easier to work with).

    Next, the nodeAdd() function is designed to add a new element to the page. In context he's adding a <div> element to the page. First it creates a new element based on the tag you pass in (a 'div' in this case). Next it checks to see if any content for this new element was passed in (which there would be in this case). If the content is an object (such as another element), then it is added directly to this new <div> element (as a child node). Otherwise it's treated as text and added to the <div> as such. And lastly if a parent is passed into this function it will appends this newly created <div> to the parent (which is your 'display' <div>). Of course if no parent is passed in then it simply returns the new element from the function (which could then be manipulated in another function or added elsewhere in the document).

    And the saladType() function is similar to the concept you already had. You simply pass in the type of salad (which will be selected from the unified object) and then the actual item (index from the array). First the function checks to see if the type of salad exist in the object, if not the function will return false (and effectively do nothing). Of course in context it does exist and so it proceeds to use the nodeAdd() function explained earlier, where it passes in the element type of a 'div', the type and actual index value from the object and lastly the parent element (display) to add this new element to. And then of course to be polite it returns true and exits the function.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    May 2014
    Posts
    900
    Quote Originally Posted by Sup3rkirby View Post
    Well first it's worth noting he converted your two arrays into an object. So you now have an object with two keys (Fruit and Nutty), each with their respective arrays (making things more organized and easier to work with).
    WAY easier to work with. Instead of having to figure out which array to access, you just index the object's named properties. Basically we're using the same technique as JSON, which could be handy of you end up using AJAX later on. Even if you don't it's something good to learn how to use.

    Sup3rkirby did a good job explaining the other two functions. nodeAdd is pretty much lifted from my javascript library combining my Element.nodeAdd and _.make methods into a standalone function. The latter as he said serves the same purpose as your original. The difference is it adds a div with the text inside it using the DOM. Really we're not supposed to be using InnerHTML unless we're "forced to" -- it can cause a complete page reflow which takes time, cpu and for some people battery. DOM manipulation is faster, though it can be more code which is why I make helper functions like nodeAdd to simplify that.

    Of course, I have the whole thing in an anonymous function so that nothing inside it pollutes the global namespace -- something one should try to do as much as possible. I run it right before </body> as at that point the DOM is already built, so we don't have to wait for onload as we're not manipulating style, just markup. Doing it that way loads faster and cleaner, and is WAY simpler than trying to use onload.
    Java is to JavaScript as Ham is to Hamburger.

  8. #8
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79
    Thank you for the explanation Sup3rkirby. I had to read about 3 or 4 times before I understood it.
    Thank you for your help deathshadow.

  9. #9
    Join Date
    Mar 2010
    Location
    Canada
    Posts
    79
    I understand how to display an object of an array now but how would I display a single string using the functions nodeAdd() and saladType() that you taught me deathshadow.

    Example: When a user type something into the input field, he then clicks on a button, it just display what he has typed.
    If I was to use innerHTML it would be something like this

    Code:
    <input type="text" id="inputText" />
    <input type="button" onclick="setValue()" /><br><br>
    <span id="status"></span>
    
    <script>
    document.getElementById('status').innerHTML = document.getElementById('inputText').value;
    </script>

    I tried to do it myself using nodeAdd() function instead of innerHTML but it doesn't work. Not sure what I'm doing wrong.
    Here's my code, everything is the same except for the new function setValue() which I created.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	Dynamic Variable References via Concatenated Strings
    </title>
    
    </head><body>
    
    	<div id="display"></div>
    
    	<input type="text" id="inputText" />
    	<input type="button" onclick="setValue()" /><br><br>
    	<span id="status"></span>
    
    <script type="text/javascript"><!--
    
    (function(){
    
    	var
    		display = document.getElementById('display'),
    		salads = {
    			Fruit : ['Apple', 'Banana', 'Pear'],
    			Nutty : ['Almonds', 'Cashew', 'Chestnuts']
    		};
    		
    	function nodeAdd(tagName, content, parent) {
    		var e = document.createElement(tagName);
    		if (content) e.appendChild(
    			typeof content == 'object' ? content : document.createTextNode(content)
    		);
    		if (parent) parent.appendChild(e);
    		return e;
    	}
    		
    	function saladType(type, item) {
    		if (salads[type]) {
    			nodeAdd('div', type + ' ' + salads[type][item], display);
    			return true;
    		} else return false;
    	}
    	
    	saladType('Fruit', 0);
    	saladType('Nutty', 1);
    	
    })();
    
    function setValue(){
    	var val = document.getElementById('inputText').value;
    	var checkVal = document.getElementById('status');
    	
    	nodeAdd('span', checkVal, val);
    }
    
    --></script>
    
    </body></html>
    Last edited by locbtran; 05-14-2014 at 07:47 AM.

  10. #10
    Join Date
    May 2014
    Posts
    900
    Your setvalue method is outside the scope of the anonymous function -- things inside an anonymous function do not even EXIST outside it -- so 'nodeAdd' is nowhere to be found.

    As a rule of thumb it's bad practice to use the various onevent attributes in your markup -- it's a scripting only behavior, so it has no business in the markup. It is better to add the handler from the scripting by latching onto the element.

    Though using input without a form and failing to write it so the page works without scripting (by going server-side first) is really bad practice.

    That said, it would go something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <title>
    	Dynamic Variable References via Concatenated Strings
    </title>
    
    </head><body>
    
    	<div id="display"></div>
    
    	<input type="text" id="inputText" />
    	<input type="button" id="setValue" value="Set Value" /><br><br>
    	<span id="status"></span>
    
    <script type="text/javascript"><!--
    
    (function(){
    
    	var
    		d = document,
    		display = d.getElementById('display'),
    		salads = {
    			Fruit : ['Apple', 'Banana', 'Pear'],
    			Nutty : ['Almonds', 'Cashew', 'Chestnuts']
    		};
    		
    	function eventAdd(e, event, handler) {
    		if (e.addEventListener) e.addEventListener(event, handler, false);
    		else if (e.attachEvent) e.attachEvent('on' + event, handler);
    	}
    		
    	function nodeAdd(tagName, content, parent) {
    		var e = d.createElement(tagName);
    		if (content) e.appendChild(
    			typeof content == 'object' ? content : d.createTextNode(content)
    		);
    		if (parent) parent.appendChild(e);
    		return e;
    	}
    		
    	function saladType(type, item) {
    		if (salads[type]) {
    			nodeAdd('div', type + ' ' + salads[type][item], display);
    			return true;
    		} else return false;
    	}
    	
    	saladType('Fruit', 0);
    	saladType('Nutty', 1);
    	
    	/*
    		I like to get and store the elements before doing things in realtime
    		slows the initial render slightly, but runs faster later on.
    	*/
    	
    	var
    		inputText = d.getElementById('inputText'),
    		status = d.getElementByID('status');
    		
    	eventAdd(
    		d.getElementById('setValue'),
    		'click',
    		function(e) {
    			nodeAdd('span', inputText.value, status);
    		}
    	);
    	
    })();
    
    --></script>
    
    </body></html>
    (completely untested, I'm on the laptop right now)

    New function, eventAdd, so you can attach the event instead of using the attribute; nice since it means less markup, so when you move this scripting into it's own little separate file it's cached across page-loads and sub-pages.

    Really if I had my way, the various onevent HTML attributes would be deprecated.
    Java is to JavaScript as Ham is to Hamburger.

  11. #11
    Join Date
    May 2014
    Posts
    900
    Oh, I also think you had the value to be plugged in and the element the new span was going to be a child of reversed... but really the big problem was a matter of scope -- everything in the anonymous function is invisible to anything outside it.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles