我想获取用户输入并将其保存为 JS 中的变量以供我的电子应用程序使用

Question

因此，在参加了 7 小时的 js 速成课程和 1 个学期的 AP 计算机科学原理之后，我正在制作我的第一个电子应用程序，所以我很新，所以对我来说很简单。我在 electron 中制作了一个商店脚本应用程序，我在 electron 中有一个初步的基本 UI 设置，其中包含一个 main.js 文件，该文件处理应用程序的打开和 UI 东西。现在，我想将第一个内容脚本作为应用程序的实际功能 (save.js)。基本上完成的 UI 将有 4 个用户输入字段，我需要从 html input/form 中获取这些输入并将它们保存为变量，然后将它们显示在屏幕上。我的变量将是（link、价格范围、品牌、型号）。从我参加的课程中，我尝试在变量中使用 document.getElementById，然后在 onclick 函数中使用 .textContent，这样当按下 html 按钮时，它会在页面的一部分上显示用户输入.它没有用，所以我尝试了这种方法，但它仍然没有 return 输入到 UI。感谢任何帮助。

这里是 save.js:

let displayLink = document.getElementById('loggedLink')

function getVal() {
    const val = document.querySelector('input').value;
    console.log(val);
    displayLink.textContent = (val);
  }

这里是 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>

Answer 1

JS 的变化

function getVal() {
let displayLink = document.getElementById('loggedLink')
const val = document.querySelector('input').value;
console.log(val);
displayLink.textContent = 'Consoloe: ' + (val);
}

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>

我想获取用户输入并将其保存为 JS 中的变量以供我的电子应用程序使用

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

javascript

user-interface

electron