Trying to display javascript values in html

homework

#1

Hello o/

I’m in an introduction to web programming class and am having trouble with my code. Any help is appreciated. This is not for a specific lesson on codecademy, all I am trying to do is make an html webpage that asks something simple like “what is your favorite fruit” and then display whatever the user enters into the text box.

For this I’m using html and then using the tag to run a bit of javascript code.

Here is my code -

<!doctype html>
<!-- Nathan Evans -->
<html>
	<head>
		<title>Personality Test</title>
	</head>
	<body>
	    <h1>Personality Test</h1>
	    
	    <p>What is your favorite fruit?</p>
	    
	    <input type="text" name="favoriteFruit" id="favoriteFruit" value=""/>
	    <input type="submit" name="btnFavoriteFruit" id="btnFavoriteFruit" value="Submit" onsubmit= "favoriteFruit()">
	    
	    <script type="text/javascript">
	        function favoriteFruit() {
	            var strFavFruit;
	            
	            strFavFruit = favoriteFruit.value();
	            document.getElementById("fruit").innerHTML = strFavFruit;
	        }
	    </script>

	    <p id="fruit"></p>
	</body>
</html>

The problem is nothing is displaying. I have changed lines of code and tried different tactics to get anything to display and I can’t seem to get it to do anything. Preferably, I want to be able to say something like “You have chosen Apples!” using

document.write("You have chosen " + strFavFruit + "!")

Or something…
I’ve looked online and one website said that using the document.write() function erases all html left on the page if its done after the page is loaded, and to only use it when debugging really.

I just want to be able to display it in one line instead of

<p>You have chosen</p>
<p id="fruit"></p>
<p>!</p>

Coming out in 3 different lines. So there you go. Two different problems.

  1. I want it to work
  2. I want it to display in one line

How do I do this?

Thanks in advance.


#2

Your function does not know what favoriteFruit is, other than the name of the function, itself. Using the same name for a function, an id and a variable is not a good idea as it leaves a lot of room for conflict.

In a simple setup such as the above, we don’t need to give our elements any id or name.

<input value="" placeholder="Fruit name">
<input type="submit" value="Submit" onsubmit="favoriteFruit()">

<p id="fruit"></p>

Now in the script…

const userFruit = document.querySelector('input');
const fruitOut = document.querySelector('#fruit');

function favoriteFruit() {
    fruitOut.textContent = `You have chosen, ${userFruit.value}!`;
}

In the above we use the more modern keywords, methods and properties, const, element.querySelector(), and node.textContent.

Using const is much the same as using var in this case. What we have done is cache the two DOM elements so we can refer to them many times while only querying them once. Notice they are cached when the script first runs at load time, not when the function is called.

document.querySelector() only captures the first instance of the target element, input so it is only a single node. The user input field is now being monitored.

In the case of <p></p> elements, there are more than one, and the target is not the first instance, so an ID is applicable. It should be written above the script, though, not below it, else our script will not see it when we go to cache the element.

We use node.textContent to prevent injection of code, which is a vulnerability in element.innerHTML (something to read up on).

Lastly, for our output we compose a single template literal which permits easy string interpolation in a single expression without the need for concatentation. Note the backticks in place of quotes.


#3

Update

Your code is using the Submit button which is a FORM control and does work outside of a form element.


  <body>
    
    <form action="">
      <p>What is your favorite fruit?</p>
      <input value="" placeholder="Fruit name">
      <input type="submit" value="Submit">
    </form>
    
    <p id="fruit"></p>
    
    <script>
    const userFruit = document.querySelector('input');
    const fruitOut = document.querySelector('#fruit');
    window.onsubmit = favoriteFruit;

    function favoriteFruit(e) {
      fruitOut.textContent = `You have chosen, ${userFruit.value}!`;
      e.preventDefault();
    }
    </script>
  </body>

Simple-form-action-with-onsubmit