Как связать строку с переменной?

Итак, я пытаюсь сделать строку из строки и переданной переменной (которая является числом). Как это сделать?

У меня есть что-то вроде этого:

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

Итак, как мне получить "horseThumb" и id в одну строку?

Я пробовал все различные варианты, я также искал googled и, кроме того, узнал, что могу вставить переменную в строку, такую как getElementById("horseThumb_{$id}") < - (не работает для меня, я не знаю почему), я нашел ничего полезного. Поэтому любая помощь будет очень оценена.

Ответ 1

Ваш код верен. Возможно, ваша проблема заключается в том, что вы не передаете идентификатор функции AddBorder или что элемент с этим идентификатором не существует. Или вы можете запустить свою функцию до того, как этот элемент будет доступен через DOM браузера.

Чтобы идентифицировать первый случай или определить причину второго случая, добавьте их в качестве первых строк внутри функции:

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

Это откроет всплывающие окна при каждом вызове функции со значением id и возвращаемым значением document.getElementById. Если вы получаете undefined для всплывающего ID-номера, вы не передаете аргумент функции. Если идентификатор не существует, вы получите свой (неправильный?) ID-номер в первом всплывающем окне, но получите null во втором.

Третий случай произойдет, если ваша веб-страница будет выглядеть так, пытаясь запустить AddBorder, пока страница по-прежнему загружается:

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

Чтобы исправить это, поместите весь код, который использует AddBorder внутри обработчика события onload:

// 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);

Ответ 2

В javascript оператор "+" используется для добавления чисел или для конкатенации строк. если один из операндов является строкой "+", и если это только числа, они добавляют их.

Пример:

1+2+3 == 6
"1"+2+3 == "123"

Ответ 3

Это может произойти, потому что java script иногда допускает пробелы, если строка конкатенирована с числом. попробуйте удалить пробелы и создать строку, а затем передать ее в getElementById.

Пример:

var str = 'horseThumb_'+id;

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

function AddBorder(id){

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

}

Ответ 4

Как и вы. И я дам вам небольшой совет для таких глупых вещей: просто используйте поле url для браузера, чтобы попробовать синтаксис js. например, напишите это: javascript:alert("test"+5), и у вас есть свой ответ. Проблема в вашем коде, вероятно, состоит в том, что этот элемент не существует в вашем документе... возможно, он внутри формы или чего-то еще. Вы также можете проверить это, написав в URL: javascript:alert(document.horseThumb_5), чтобы проверить, где находится ваша ошибка.

Ответ 5

Другой способ сделать это проще с помощью jquery.

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');

}

Где product_id - это javascript var и $( "# added _" + product_id) - это идентификатор div, объединенный с product_id, var из функции add.

С наилучшими пожеланиями!