asked on

how to attribute a value to a javascript variable from within the page

I need to receive the value of an input and attribute it into a javascript variable. I need the variable "circles" to be dynamically attributed from an input within the same page without reloading the page. The code below writes the circles so it should also be able to cope with the changes from the input variable being changed within the page...

      <script type="text/javascript">
		var circles= 5
		for (i=0; i < numberOfNodes; i++)
		{
			document.write("<div class='circle animate orange'></div>")
		}
		document.write("<div id='circle' class='circle'></div>")
	</script>

Open in new window

Any help would be much appreciated.
Cheers

Gary

You mean something like this

var circles= $("#someinput").val()

Julian Hansen

I think Gary has covered it with JQuery - you seem to be using straight JS but have posted to the JQuery group so just need to understand more.

I am assuming this follows on from your previous question on animating circles based on an AJAX request. Is the value you are wanting to use the return of the AJAX call or something the user inputs?

If the latter you have not shown us where the variable is being input. Your loop is also confusing because it uses numberOfNodes as the loop terminator and the variable circles is not used - should they be the same thing.

Give us a bit more of the code and context specifically can you be a bit more clear on what you mean by
"The code below writes the circles so it should also be able to cope with the changes from the input variable being changed within the page."

Rodric MacOliver

ASKER

Yep julianH you are completely right, I used an older piece of code sorry. Yes I need to retrieve with Ajax the number of circles, it must be the number of records from a SQL query, but even though you guys said it was an easy concept I couldn't make it work...
Here is the code:

<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>test</title>
<style type="text/css">
#circle-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  border: 0px solid green;
}
.circle {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background: red;
  left: 230px;
  top: 230px;
}
.blue {
  background: blue;
}
.green {
  background: green;
}
.yellow {
  background: yellow;
}
.orange {
  background: orange;
}
.pink {
  background: pink;
}
</style>
</head>
<body>

<div id="circle-container">
	<script type="text/javascript">
		var numberOfNodes = 9
		for (i=0; i < numberOfNodes; i++)
		{
			document.write("<div class='circle animate orange'></div>")
		}
		document.write("<div id='circle' class='circle'></div>")
	</script>  
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
var clicked = false;
var distanceToMove = 100;
$(function() {
  $('#circle').click(function() {
    if (clicked) return;
    clicked = true;
    var total_circles = $('#circle-container .circle.animate').length;
    var angle = (Math.PI * 2 / total_circles)
    $('#circle-container .circle.animate').each(function(indx, item) {
      var top = distanceToMove * Math.cos(angle*(indx-1));
      var left = distanceToMove * Math.sin(angle *(indx-1)); 

      $(this).animate({left: "+=" + left, top: "+=" + top}, 1000);
    });
  });
});
</script>
<script src="Test_files/plugin.js" type="text/javascript"></script></body></html>

Open in new window

Thanks.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial