• 0

[javascript]variables and form items


Question

Hi all,

It's been a while since I last dabbled in JS, and I was never really got the hang of scripting, but I'm trying to produce a javascript-based program designed to solve Bletchly Park problems. However, I'm sure the problem is due to my lack of understanding of how variables and things are declared.

Basically, I have a matrix (a 6x6 table) each of which has a letter or number inside it. The columns and rows are labelled 1-6 and a-b respectively. Each cell has a variable attached to it, for example cell number a1 has the variable a1. Simple, right? When I apply the variable to the innerHTML of a span, I get exactly what I'm looking for: the value of the cell (in this case x).

What I'm asking is, how do i make an input box, where you can enter a variable (eg a1) and return the value (x) to a span? I already have a function which does this, but it keeps returning it a a string, returning a1 instead of x... how do i change that?

I'm really enjoying working on this project, and would really like to get somewhere with it, so advice and help is gratefully recieved :D

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Your explanation is very unclear

Sorry! :blush:

Essentially, there are some predifined variables in the code, an input box, and a span. What I want to be able to do when i run the page, is type in a variable name in the input and receive the value of the variable, not its name, in the span.

Actually, a friend solved the problem for me:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
* {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	}
.matrix {
	width:1em;
	height:1em;
	}
</style>
<script type="text/javascript" language="javascript">

function getLetterFromMatrix(){
	// Tries to pull matrix ref from text box	
	var reference = document.getElementById('clue').value;

	// Use the text box value to pull value from appropriate matrix ref
	document.getElementById('test').innerHTML =  document.getElementById(reference).value
	}


</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<span id="a1>Testing!</span>
<span id="test"></span><span id="test2"></span>
<input id="clue" name="clue" type="text" value="" />
<input value="Go" name="Go" type="button"  onclick="getLetterFromMatrix()"/>
</body>
</html>

Obviously there is more to the HTML than that, so i simplified it.

However, there is still another thing to need to figure out, involving table cells but i will ask that in another thread.

:D

Link to comment
Share on other sites

  • 0

First of all, start by hooking to different event, which in the case of forms is onsubmit or maybe even onblur. The form can be submitted w/o firing the onclick. Also, add the actual form to the markup; form controls should be used inside forms and the form provides a hookup point.

Small example using jQuery library as a helper:

$(document).ready(function(){

	/*
		Fire this when the form
		is submitted
	*/	

	$('form').submit(
		function() {

			/*
				Get the typed value from the input #clue
			*/

			var clue = $('input#clue').val();

			/*
				Get the element's contents, which
				has the ID the user just typed in
			*/

			var answer = $('#' + clue).text();

			/*
				Print the answer to at the beginning of body
			*/

			$('body').prepend(answer);

			/*
				Prevent form's default action, submit, by returning false
			*/

			return false;
		}
	);
});

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.