我想獲取用戶輸入并將其保存為我的電子應用程式的JS中的變數-有解無憂

所以我在 7 小時的 js 速成課程和 1 個學期的 AP 計算機科學原理之后制作了我的第一個電子應用程式，所以我很新，所以我很裸露。我在電子中制作了一個商店腳本應用程式，我在電子中有一個初步的基本 UI 設定，其中有一個 main.js 檔案，該檔案處理應用程式的打開和 UI 內容。現在我想讓應用程式的第一個內容腳本部分實際執行一些操作（save.js）。基本上完成的 UI 將有 4 個用戶輸入欄位，我需要從 html 輸入/表單中獲取這些輸入并將它們保存為變數，然后將它們顯示在螢屏上。我的變數將是（鏈接、價格范圍、品牌、型號）。從我參加的課程中，我嘗試在變數中使用 document.getElementById，然后在 onclick 函式中使用 .textContent，這樣當 html 按鈕被按下時，它會在頁面的一部分上顯示用戶輸入。它不起作用，所以我嘗試了這種方法，但它仍然沒有將輸入回傳到 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>

uj5u.com熱心網友回復：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/400035.html

標籤：javascript 用户界面电子

上一篇：將javascripteval方法更改為另一種解決方案