How to establish two-way connection between HTML and JS files?

Question

I'm making my first text-based interactive scenario, I want the user to enter whatever they want and click Submit. There is just title, some scenario text, a typing space and button to Submit, however when I press the submit, it always gives error that the "output" is not specified.

I've established I can use functions from HTML in JS with the "getElementById", however this doesn't seem to work the other way around. (Also I'm using the integrated browser emulation in Scrimba). If anyone can tell me a good software they use with live representation of the code that will be huge help too.

I've tried moving the <script type="text/javascript" src="index.pack.js"></script> from the head, to the body, to the end of the body, and that doesn't change anything.

I've also tried to change the onclick and do the entire process in JS, then just display the new text by refreshing the window, but then clicking showed no response and not even an error at all, so it was likely a wrong code. This is why I'd much prefer to change as little as possible about the current layout.

var userAnswer = document.getElementById("userAnswer").value;
function output(userAnswer) {
    var answer1 = "";
    switch(userAnswer) {
     case 1:
     case "What is its name?":
     case "Ask for name":
        answer1 = document.getElementById("outputText").innerHTML = "Yes"
        break;        
    }
    return answer1;
}

<h1>The Creature Trial</h1>
<p id="outputText"><em>A creature of inconceivable dimensions encountered...</em></p>
<textarea placeholder="What do you do..." id="text" rows="5" cols="25"></textarea>
<input id="userAnswer" type="button" value="Proceed" onclick="output(userAnswer)">
<script type="text/javascript" src="index.pack.js"></script>

Obviously in this example I'm just trying to change the text to Yes.

Above the JS code shown here, are the 118 objects and some vars, nothing important to the problem.

What I want to achieve is receive the userAnswer, and from that, find certain specified keywords that link to the JS objects, and based on those keywords change the outputText "A creature of inconceivable dimensions encountered..." to the appropriate response I choose, in this case "Yes".

Instead, nothing happens as I click, and I receive this message in the console:

ReferenceError: output is not defined (https://run.scrimba.com/static/cdPLKJh8/-1/index.html:1)

EDITS: 1. Thanks to Masoud Keshavarz for editing this post, and making its formating less of a mess.

2. To clarify, the HTML code and the JS code are external files, they are completely separate.

3. I did replace the "userAnswer" references with "text", as I was originally mistakenly referring to the button not the text that was inputted.

4. Finally I found that after the now-Approved comment edited my code it stopped showing the error, but it truly worked when I changed the number 1 in case 1 of the switch, to a string rather than a plain number (adding quotes around it). This is still strange and I don't understand why I can only use strings not numbers but it works.

The only problem with this solution is that it doesn't solve the connection problem between the two files HTML and JS, but rather it combines them in one. I would really like to have them separate or at least find out if that is possible or not?

Answer 1

I changed a little bit your js code like this

function output() {
let userAnswer = document.getElementById("text").value;
    var answer1 = "";
    switch(userAnswer) {
     case 1:
     case "What is its name?":
     case "Ask for name":
        answer1 = document.getElementById("outputText").innerHTML = "Yes"
        break;        
}
return answer1;
}

And at your html I changed the onclick to call the function without parameter

<input id="userAnswer" type="button" value="Proceed" onclick="output()">

Answer 2

Three issues:

1. You're getting the value of the wrong element. The text you're looking for is in the text element, which is a textarea, and not the userAnswer element, which is a button.

2. You're getting the value of the element at the wrong time - when the script loads, not when the user clicks the button. When the script loads, the value of the text element is blank. To fix this, move the var userAnswer... line inside the function.

3. You don't need to pass an output variable to the function if you're using getElementById to get the value. It doesn't hurt to leave it in, but it's not necessary.

Here's the result:

function output() {
    var userAnswer = document.getElementById("text").value;
    var answer1 = "";
    switch(userAnswer) {
     case 1:
     case "What is its name?":
     case "Ask for name":
        answer1 = document.getElementById("outputText").innerHTML = "Yes"
        break;
     }
     return answer1;
}

<h1>The Creature Trial</h1>
<p id="outputText"><em>A creature of inconceivable dimensions encountered...</em></p>
<textarea placeholder="What do you do..." id="text" rows="5" cols="25"></textarea>
<input id="userAnswer" type="button" value="Proceed" onclick="output()">
<script type="text/javascript" src="index.pack.js"></script>