Можно ли объявить переменные функции Javascript в HTML?

Question

Извините, я просто новичок в этом и имел предыдущий опыт работы с C ++, и вопрос можно ли сделать в javascript / html.

Я хочу сделать функцию в JavaScript, которая заменяет изображение при нажатии, используя массив местоположений изображения. Можно ли как-то объявить необходимую переменную (номер позиции в массиве) в HTML? Поэтому мне не нужно создавать отдельную функцию для каждого отдельного изображения.

В c ++ вы создаете функцию, а затем объявляете переменную в скобках. Возможно ли это здесь, а если нет, есть ли какое-нибудь близкое решение?

JavaScript:

var imgArray = ["images/2.jpg","images/3.jpg"]

function newImage() {
  document.getElementById('pic').src = imgArray[1];
}

HTML:

<div class="project" id="ba">
   <p onclick="newImage()">Poster</p>
</div>

Можно ли вставить номер в html "newImage (NUMBER)"?

Answer 1

Если вы планируете использовать только один <p>, вы можете инициализировать переменную-счетчик, которая увеличивается каждый раз, когда вы нажимаете на ярлык «poster», и изменяете его по длине массива изображений.Это зациклило бы доступные изображения.

var imgArray = ["images/2.jpg","images/3.jpg"]
var counter = 0;
function newImage() {
  document.getElementById('pic').src = imgArray[counter];
  counter = ++counter % imgArray.length;
}

<div class="project" id="ba">
   <p onclick="newImage()">Poster</p>
</div>
<img id="pic" src="#"/>

Иначе, обновите вашу функцию newImage(), чтобы иметь аргумент newImage(index) и передайте необходимый индекс в ваш <p onclick="newImage(1)">poster</p>

Answer 2

Вы можете отправить индексный номер из HTML и получить его в функции javascript в качестве параметра:

function newImage(index) {
   document.getElementById('pic').src = imgArray[index];
}  

// in the html
<div class="project" id="ba">
     <p onclick="newImage(1)">Poster</p>
</div>

Answer 3

Вы не можете объявить переменные в HTML. Поэтому невозможно сделать что-то вроде onclick="newImage(variable);", исключительно с HTML. Если вы используете фреймворк, такой как ASP.NET, вы можете делать такие вещи, как onclick="newImage(@variable);", используя Razor. Я полагаю, что Angular, React и т. Д. Предоставляют аналогичные функции.

Однако есть и другие способы добиться чего-то похожего в «ванильной» настройке.

Если это просто статическое число, вы можете передать его без переменной. Что-то вроде onclick="newImage(3);"

Вы также можете установить атрибут value, который также доступен в JavaScript. что-то вроде <p id="poster" value="3" onclick="newImage();">Poster</p>.

Тогда в JS:

function newImage(){
   value = document.getElementById("poster").value;
   /* do something with the value */
}

Если вы используете PHP, вы также можете передавать переменные PHP в JavaScript с помощью функции onclick, как показано здесь . Я бы порекомендовал этот маршрут, если вы динамически генерируете свой HTML (например, в цикле PHP) и не хотите жестко кодировать каждое отдельное значение.