Cannot return a var's value

JavaScript
1

Hello out there,
as a self teaching beginner I try to do such simple thing:

Get a text from a textbox → ok
Check the text → ok
Return info if the text eq “test” ->??

Here my attempt:

<!doctype html>
<head>
	<meta charset="UTF-8"/>
	<title>Test</title>
</head>
<body onload ="Reset()">
<p>Test   <input type="text" id="Inbox" style="width: 75px;">
	<input type="button" value="Test" onclick="Send()">
</p>
<script>
function Reset(){
	Inbox.value ="";
	document.getElementById("Inbox").focus();
}

function Send(returned){
	var text = document.getElementById("Inbox").value;
	
	alert ("#1 " + text);
	Receive(text)

	if (returned == undefined){
		alert ("#1.1 Ooops!  " + returned);
	}
	else {
		alert ("#1.1 It works!  " + returned);	
	}
	Reset();
}

function Receive(text){
	var returned;
	var caller = arguments.callee.caller.name;
	
	if (text == "test") {
		text = "It works!";
		alert ("#2 " + text + " called by " + caller);
		
		returned = "returned";
		alert ("#2.1 " + returned);
		return returned; /* doesn't work*/
	}
	
	alert ("#2 " + text + " called by " + caller);
	Reset();
}
</script>
</body>
</html>

I do use alerts to check the status of the var’s.

THX to you all!

Doc Root

2

Hi,

A couple of suggestions:

  • Consider using modern JS syntax (ES6+)
  • Use a linter to check your code for errors and stylistic issues (e.g. using double equals instead of tripple, or forgetting semi colons)
  • Consider using addEventListener instead of inline handlers
  • Using a capital in a function name usually denotes a constructor/class
  • Use console.log for debugging. It’s so much more flexible than alert
  • Calling the reset function at the bottom of the page once everything else has loaded will remove the need for the onload handler on the <body> element

Like this:

<!DOCTYPE html>
<html lang="en" >
  <meta charset="UTF-8"/>
  <title>Test</title>
  <style>#inbox { width: 75px; }</style>
</head>

<body>
  <p>
    Test
    <input type="text" id="inbox">
    <input type="button" value="test" id="submit">
  </p>

  <script>
    const inbox = document.querySelector('#inbox');
    const button = document.querySelector('#submit');

    button.addEventListener('click', () => {
      console.log(inbox.value === 'test');
    });
  </script>
</body>
</html>

HTH. Happy to discuss any of the above.

3

Thanks for all the ideas. Let me try to explain my beginners understanding.

Capital for Classes/Constructors only? I’m too stupid so far to use Calsses… My style: var with small, functions with capitals.
Console instead of alerts? Sure - but I’m used to this with VBA as well and at the end there’s no difference.
Reset onlaod helps to check changes in the code in FF with F5 easily.
But styles are actually not the issue.

I’m right? Your code proposes a second button to continue the routine? With return I guessed to contiue in Send() with a new value. I don’t want to set up a button for every new step in a routine.

4

When you call the function and want to receive its result, you should assign that call to some variable:

let result = myFunction()

this way result variable will contain the value provided by the return inside function

In your case it would look like:

let returned = Receive(text)
5

You might want to check more common JS coding style:

6

I guess that’s the key!! THX a lot!

About code styling: Chinese say Yat bow yat bow step for step … First make things run then do the make up. Thank you for the link anyway. I promise I’ll follow the advices very soon :wink:

Have a nice day!

1 Like
7

Found a solution!! Take a look and have fun!

<!doctype html>
<head>
	<meta charset="UTF-8"/>
	<title>Test</title>
</head>
<body onload ="Reset()">
<p>Test   <input type="text" id="Inbox" style="width: 75px;">
	<input type="button" value="Test" onclick="Send()">
</p>
<script>
var returned; //global var

function Reset(){
	Inbox.value ="";
	document.getElementById("Inbox").focus();
}

function Send(){
	var text = document.getElementById("Inbox").value;

	Receive(text)

	if (returned == undefined){
		alert ("#2 Ooops!  " + returned + " " + text);
	}
	else {
		alert ("#2 Juhuu!  " + returned);
		returned = undefined;
	}
	Reset();
}

function Receive(text){
	var caller = arguments.callee.caller.name;
	
	if (text == "test") {
		text = "Juhuu!";
		returned = "I'm a Yedi!!";
		
		//alert ("#1 " + text + " " + returned + " called by " + caller);
	}
}
</script>
</body>
</html>

Sorry - not yet restyled …

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.