Is it possible to declare Javascript function variables in html?

Question

Sorry, I am just very new in this and had a previous experience in C++, and the question is it possible to do in javascript/html.

I want to make a function in JavaScript which replaces image on click using an array of image locations. Is it possible somehow to declare the needed variable (position number in the array) in the html? So I don't have to create a separate function for each individual image.

In the c++ you make a function and then declare a variable inside the brackets. Is it possible here, and if not, is there any close solution?

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>

Is it possible to insert the number in html "newImage(NUMBER)"?

The language you are using here is Javascript, not Java. (They're completely different languages.) I've updated your question accordingly. — user149341
– user149341, Commented Apr 18, 2019 at 19:42
thank you haha. a brilliant illustration of my level of knowledge in this — Martin Lezhenin
– Martin Lezhenin, Commented Apr 18, 2019 at 19:45

Dblaze47 · Accepted Answer · 2019-04-18 19:50:20Z

1

You can send the index number from HTML and receive that in the javascript function as a parameter:

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

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

answered Apr 18, 2019 at 19:50

Dblaze47

8685 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Lezhenin Over a year ago

Thank you very much! Another question: if I want to include text captions to images the same way, what is the best solution to it? should it be edited? or some txt files replaced? or just a simple array with all the texts in the same order as pictures?

Dblaze47 Over a year ago

You can do two arrays like you say, or maybe add a caption to the image using the alt attribute. The best way is to use some framework to bind the html with a model and handle the logic in the javascript function. Binding data provides much more control and possibilities. At the least, you can use jQuery.

Jonathan Hamel · Accepted Answer · 2019-04-18 19:52:09Z

1

If you plan on using only one , you can initialize a counter variable which gets incremented every time you click on "poster" label and mod it to the length of the images array. It would loop the available images.

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="#"/>

Else, update your newImage() function to have an argument newImage(index) and pass the needed index in your poster

answered Apr 18, 2019 at 19:52

Jonathan Hamel

1,38313 silver badges19 bronze badges

Comments

ryan.kom · Accepted Answer · 2019-04-18 19:55:46Z

You can't really declare variables in HTML. So it's impossible to do something like onclick="newImage(variable);", with exclusively HTML. If you're using a framework like ASP.NET you can do things like onclick="newImage(@variable);" using Razor. I believe Angular, React, etc. all provide similar functionality.

However, there are other ways to achieve something similar in a "vanilla" setup.

If it's just a static number you can pass it with no variable. Something like onclick="newImage(3);"

You can also set a value attribute which can be accessed in JavaScript as well. something like Poster.

Then in JS:

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

If you're using PHP you can also pass PHP variables to JavaScript through the onclick function as demonstrated here. I would recommend this route if you're dynamically generating your HTML (e.g. within a PHP loop) and might not want to hard code each individual value.

Collectives™ on Stack Overflow

Is it possible to declare Javascript function variables in html?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related