Passing html text input to Javascript variables

Hey guys,
So I’m trying to make a ‘library’ for easier studying and you might laugh at me, but I just started programming, so don’t judge please.
I figured I can make a library in javascript pretty easy by making topic/subtopic/keyword values and condititional statements that will output a certain text passage or formula or whatever when the according keyword/topic is being inserted.

I’d be able to do that, if I’d only use JavaScript, but since JavaScript is not as appealing as HTML, I wanted to have like a search engine, with a HTML input field.

Just to keep it simple I would include the JavaScript code in the HTML code, coz I didn’t figure out the whole relative path and extrernal path thing, but might change that later.

for starters I’d do something like:
<DOCTYPE! html>

blablabla, some code </head

what aspect of that do you want help with?

I need help with the linking of the HTML input with the JS variable. So e.g. when I’m on my website and i write something in the input box and submit the input the input should be assigned to a specific variable that I then want to use in if statements. and in my case the linking of the input with the variable doesn’t work

You could have an input box in your HTML:

    <input type="text" id="textBox" />

and to access what the user types in, in the javascript,

// assign variable for the HTML input element
const textBox = document.getElementById("textBox");  

function doThisAfterInputChanges () {
  const inputText = textBox.value;  // get what user typed into textBox (as a string)
  // do stuff with inputText here
} 

// assign function to be run whenever "change" content of textBox (and leave textBox)
textBox.onchange = doThisAfterInputChanges;

If you want the JavaScript inside the HTML, you’d use the script tag:

<script defer>
  // javascript goes here
</script>
1 Like