Member Avatar for adaykin

Hello I have a JSON array data.cells that I need to iterate through to get the values out of and put the values into an onclick event listener.

Right now the variable name data.cells.letter is being based through the buildString function for each cell in my board, instead of the value of the variable. Same goes for the x and y variables.


for(var i = 0; i < data.cells.length; i++) {
			var x = i % 4 + 1;
			var y = 0;
			if(i < 4) {
				y = 1;
			}
			else if(i < 8) {
				y = 2;
			}
			else if(i < 12) {
				y = 3;
			}
			else {
				y = 4;
			}
			document.getElementById('t' + i).addEventListener('click',function(data){
				buildString(this, data.cells[i].letter, x, y);}, false);
			document.getElementById('t' + i).setTextValue(data.cells[i].letter);
		}
  • 3 Contributors
  • 3 Replies
  • 136 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 3 Replies

Member Avatar for ShawnCplus

I have no idea what you're trying to do, you're already are passing those variables to the function.

buildString(this, data.cells[i].letter, x, y);
Member Avatar for adaykin

So when the buildString function gets called instead of some value for data.cells.letter like 'A' the string data.cells.letter is being passed to the function. I want to get what the value of data.cells.letter is.

Member Avatar for essential

This might get what you need. An example of passing the arguments ( or parameter ) to another function.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Getting Javascript Variable and Display into Table Cell</title>
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #ccc;
  color : #405060;
  font : normal normal normal 95%/1.4 "Trebuchet MS", "Bernard MT Condensed", Tahoma, Verdana, Helvetica, Arial, sans-serif;
  min-height : 600px;
  text-align : center;
  height : auto;
  width : auto; }

body .m-title {
  background-color : #444;
  border-top : 2px solid #000;
  border-bottom : 2px solid #000;
  color : #757575;
  margin-top : 0;
  padding : .100em 1em .100em 1em;
  text-align : left;
  width : auto; }

div#main {
  background-color : #f0f0f0;
  margin : 0 auto;
  height : inherit !important;
  padding : 0;
  width : 100%; }

div.tube {
  border : 1px solid;
  background-color : inherit;
  height : inherit !important;
  clear : both;
  padding : 1em;
  margin : 0;
  overflow : hidden; }

  table {
  border-top : 1px solid;
  border-collapse;
  margin : 1em auto 0 auto;
  padding : 0;
  text-align : left;
  width : 100%; }

  td {
  font : normal normal normal 10pt Verdana, Arial, sans-serif;
  border-bottom : 1px solid;
  letter-spacing : 2px;
  color : #696969;
  line-height : 1.5;
  white-space : pre-wrap;
  vertical-align : middle;
  padding : .300em 1em .300em 1em; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

var getArgs;
var buildString;

   buildString = function( letter, cIndex, param3, param4 ) {

// I was assuming that the buildString function is  implemented this way.

  table = (( document.getElementById ) ? document.getElementById("data") : (( document.all ) ? document.all[ "data" ] : document.layers[ "data" ] )).rows[ 1 ].cells[ cIndex ]; 

   text = "The letter <b>\u0022" + letter + "\u0022</b> is an argument ( or parameter ) passed by the getArgs() function gathered in first ROW at CELL " + (( cIndex ) + 1 ) + ".\n\n";
   text += "Varible <b>x</b> = <span style=\"color : #f50\">" + param3 + "</span>\n";
   text += "Varible <b>y</b> = <span style=\"color : #f50\">" + param4 + "</span>\n";
   table.innerHTML = text; 

   };
   getArgs = function( rIndex ) {
      data = (( document.getElementById ) ? document.getElementById("data") : (( document.all ) ? document.all[ "data" ] : document.layers[ "data" ] ));
      cLen = data.rows[ rIndex ].cells.length
      for ( var i = 0; i < cLen; i++ ) {
      x = i % 4 + 1;
      y = 0;
      y = (( i < 4 ) ? 1 : (( i < 8 ) ? y = 2 : (( i < 12 ) ? y = 3 : y = 4 ))); 
   buildString( data.rows[ rIndex ].cells[ i ].innerText, i, x, y );
      } 
   };
window.onload = function() { getArgs( 0 ) };
// ]]>
</script>
</head>
<body>
<div id="main">
<div id="content" class="tube">

<h2 class="m-title">Getting Javascript Variables</h2>
<table id="data" frame="void" rules="none" summary="Getting Javascript Variables and passing it into Table Cell.">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>Not Set</td>
<td>Not Set</td>
<td>Not Set</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.