如何将字符串与变量连接起来？

所以我尝试用一个字符串和一个传递的变量(一个数字)创建一个字符串。 我该怎么做？

我有这样的东西:

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

那么如何将‘ horseThumb’和 id 放入一个字符串中呢？

我尝试了所有不同的选项，我也谷歌和除了学习，我可以插入一个变量在字符串像这样的 getElementById("horseThumb_{$id}") < ——(不适合我，我不知道为什么)我发现没有任何有用的。所以如果你能帮忙，我将不胜感激。

538780 次浏览
小开

It's just like you did. And I'll give you a small tip for these kind of silly things: just use the browser url box to try js syntax. for example, write this: javascript:alert("test"+5) and you have your answer. The problem in your code is probably that this element does not exist in your document... maybe it's inside a form or something. You can test this too by writing in the url: javascript:alert(document.horseThumb_5) to check where your mistake is.

小开

In javascript the "+" operator is used to add numbers or to concatenate strings. if one of the operands is a string "+" concatenates, and if it is only numbers it adds them.

example:

1+2+3 == 6
"1"+2+3 == "123"
小开
最佳答案

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);
小开

This can happen because java script allows white spaces sometimes if a string is concatenated with a number. try removing the spaces and create a string and then pass it into getElementById.

example:

var str = 'horseThumb_'+id;


str = str.replace(/^\s+|\s+$/g,"");


function AddBorder(id){


document.getElementById(str).className='hand positionLeft'


}
小开

Another way to do it simpler using jquery.

sample: 

function add(product_id){


// the code to add the product
//updating the div, here I just change the text inside the div.
//You can do anything with jquery, like change style, border etc.
$("#added_"+product_id).html('the product was added to list');


}

Where product_id is the javascript var and$("#added_"+product_id) is a div id concatenated with product_id, the var from function add.

Best Regards!


提交答案