pass javascript variable to html

Question

1.86/5 (4 votes)

See more:

My javascript code is:

JavaScript

<script type="text/javascript">

         var cars = new Array(5);

         cars[0] = "Audi";
         cars[1] = "Bentley";
         cars[2] = "Mercedes";
         cars[3] = "Mini";
         cars[4] = "BMW";
      
        </script>

Now I want to show the value of each array one by one on button click on my page content.

Kindly Help.

Posted 28-Aug-13 22:03pm

ujju.1

Add a Solution

Comments

Jameel VM 29-Aug-13 4:07am

in what format you want to display the values?can you elaborate your requirement?

ujju.1 29-Aug-13 4:11am

the value will be displayed in the <div> inside the html and in simple text one by one as the user will click the next button.

2 solutions

Solution 4

<html>
<head>
<script type="text/javascript">
 
var i=0;        
 var cars = new Array(5);
 
         cars[0] = "Audi";
         cars[1] = "Bentley";
         cars[2] = "Mercedes";
         cars[3] = "Mini";
         cars[4] = "BMW";

function BtnClick()
{
	
	if (i<= cars.length-1)
	{
	 document.getElementById("carsDiv").innerHTML += cars[i] + '<br />';
         i=i+1;
	}else
	{
	if(confirm('do you want to see again ?'))
	{
		i=0;
                document.getElementById("carsDiv").innerHTML='';
    
	}
	else 
	{
	 alert('Thanks!!');
        }	
	
       
	}
}      


</script>

</head>
<body>
<div id="carsDiv">
</div>

<input type='submit' onclick='javascript:BtnClick()' value='click' />
</body>
</html>

Posted 28-Aug-13 23:17pm

R. Ansari

Comments

351 PRAJAPATI AKASH 15-Dec-21 7:55am

How to Pass JavaScript Variable value into Html textbox

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Thomas Daniels · Accepted Answer · 2013-08-28T22:15:00

Solution 2

Try this:

HTML

<div id="carsDiv">
</div>
<button id="addCarBtn">Add Car</button>
<script>
var current = 0;
var cars = new Array(5);
cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";
document.getElementById("addCarBtn").onclick = function() {
       if (!(current > cars.length - 1))
       {
            document.getElementById("carsDiv").innerHTML += cars[current] + "<br />";
            current++;
       }
}
</script>

Hope this helps.

Posted 28-Aug-13 22:15pm

Thomas Daniels

Comments

ujju.1 29-Aug-13 4:20am

its showing the error: Unable to set property 'onclick' of undefined or null reference

Thomas Daniels 29-Aug-13 4:21am

Make sure you run the script after you've created the button. Also, check whether the ID of the button and div are equal to the IDs that you use in your script.

ujju.1 29-Aug-13 4:28am

yeah. this is getting somewhere. when i click the button, the array[0] i.e "Audi" is displayed but just for fraction of seconds. then it disappears and only the button is visible.

Thomas Daniels 29-Aug-13 4:33am

Can you show your code?

ujju.1 29-Aug-13 5:17am

hey. Thanx. after some modification, its working fine now.

<script>
var current = 0;

var cars = new Array(5);
cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";

window.onload = function () {
document.getElementById("addCarBtn").onclick = function () {
if (!(current > cars.length - 1)) {
document.getElementById("carsDiv").innerHTML = cars[current] + "<br />";
current++;
}
}
};
</script>

html:

<div id="carsDiv"> </div> <button id="addCarBtn" type="button">Add Car</button>

Thomas Daniels 29-Aug-13 5:47am

You're welcome!