So I'm making my first electron app after a 7 hour js crash course and 1 semester of AP Computer Science Principles so I'm pretty new, so bare with me. Im making a shop script app in electron and I have a preliminary basic UI setup in electron with a main.js file which handles the opening of the app and UI stuff. Now I wanted to make the first content script part of the app that actually does stuff (save.js). Essentially the finished UI will have 4 user input fields and I need to take those inputs from the html input/form and save them as variables, then display them on the screen. My variables will be (link, price range, Brand, Model). From the course I took I tried to use document.getElementById in a variable and then using .textContent in an onclick function, so that when the html button is pressed it displays the user input on a section of the page. It didn't work, so I tried this approach and it still doesn't return the input into the UI. Any help is appreciated.
Here is the save.js:
let displayLink = document.getElementById('loggedLink')
function getVal() {
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = (val);
}
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="submit">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>
change in JS
function getVal() {
let displayLink = document.getElementById('loggedLink')
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = 'Consoloe: ' + (val);
}change in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Add Link</title>
</head>
<body>
<script src="save.js"></script>
<form>
<div>
<label>Enter Item</label>
<input type="text" id="itemEl" autofocus>
</div>
<button onclick="getVal()" type="button">Add Item</button>
<span id="loggedLink">Consoloe: </span>
</form>
</body>
</html>