I want to take user input and save it as a variable in JS for my electron application-CodePudding

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>

CodePudding user response：

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>