Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I concatenate a string with a variable?

Tags:

javascript

So I am trying to make a string out of a string and a passed variable(which is a number). How do I do that?

I have something like this:

function AddBorder(id){     document.getElementById('horseThumb_'+id).className='hand positionLeft' } 

So how do I get that 'horseThumb' and an id into one string?

I tried all the various options, I also googled and besides learning that I can insert a variable in string like this getElementById("horseThumb_{$id}") <-- (didn't work for me, I don't know why) I found nothing useful. So any help would be very appreciated.

like image 395
necker Avatar asked Nov 20 '10 19:11

necker


People also ask

How do you concatenate a variable in a string in SQL?

Concatenates two strings and sets the string to the result of the operation. For example, if a variable @x equals 'Adventure', then @x += 'Works' takes the original value of @x, adds 'Works' to the string, and sets @x to that new value 'AdventureWorks'.

How do you concatenate strings and variables in Java?

Using the + operator is the most common way to concatenate two strings in Java. You can provide either a variable, a number, or a String literal (which is always surrounded by double quotes). Be sure to add a space so that when the combined string is printed, its words are separated properly.


1 Answers

Your code is correct. Perhaps your problem is that you are not passing an ID to the AddBorder function, or that an element with that ID does not exist. Or you might be running your function before the element in question is accessible through the browser's DOM.

Since ECMAScript 2015, you can also use template literals (aka template strings):

document.getElementById(`horseThumb_${id}`).className = "hand positionLeft"; 

To identify the first case or determine the cause of the second case, add these as the first lines inside the function:

alert('ID number: ' + id); alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id)); 

That will open pop-up windows each time the function is called, with the value of id and the return value of document.getElementById. If you get undefined for the ID number pop-up, you are not passing an argument to the function. If the ID does not exist, you would get your (incorrect?) ID number in the first pop-up but get null in the second.

The third case would happen if your web page looks like this, trying to run AddBorder while the page is still loading:

<head> <title>My Web Page</title> <script>     function AddBorder(id) {         ...     }     AddBorder(42);    // Won't work; the page hasn't completely loaded yet! </script> </head> 

To fix this, put all the code that uses AddBorder inside an onload event handler:

// Can only have one of these per page window.onload = function() {     ...     AddBorder(42);     ... }   // Or can have any number of these on a page function doWhatever() {    ...    AddBorder(42);    ... }  if(window.addEventListener) window.addEventListener('load', doWhatever, false); else window.attachEvent('onload', doWhatever); 
like image 163
PleaseStand Avatar answered Oct 04 '22 00:10

PleaseStand