如何讓用戶訪問Javascript中的物件？-有解無憂

我很新，但我已經完成了一些關于 freecodecamp 的課程。假設我制作了一個關于汽車的物件。我希望網頁用戶能夠撰寫“Ford Mustang”，然后彈出存盤在物件 fordMustang 中的所有資訊供用戶閱讀。

我嘗試了一些不同的策略，但無法讓它發揮作用。這是我寫的代碼，

        <label for="navn">
            <input type="text" id="field" class="field" name="navn">
            <input type="submit" value="send" id="send" class="send">
        </label> <p id="par"> </p>

let fordMustang = {
producer: "Ford",
type: "Mustang",
engine: "v8",
horsePower: 300 }
const inputField = document.querySelector(".field");
const press = document.querySelector("#send");
const para = document.querySelector("#par");

function objScan() {
    const word = String(inputField.value);
    if (word == "Ford Mustang") {
        para.textContent = fordMustang;
    }
    else {
        para.textContent = "Not recognized"
    }
}
press.addEventListener("click", objScan);

uj5u.com熱心網友回復：

您可以使用它JSON.stringify()來實作這一點。您需要替換para.textContent = fordMustang;為JSON.stringify(fordMustang);

let fordMustang = {
producer: "Ford",
type: "Mustang",
engine: "v8",
horsePower: 300 }
const inputField = document.querySelector(".field");
const press = document.querySelector("#send");
const para = document.querySelector("#par");

function objScan() {
    const word = String(inputField.value);
    if (word == "Ford Mustang") {
        para.textContent = JSON.stringify(fordMustang);
    }
    else {
        para.textContent = "Not recognized"
    }
}
press.addEventListener("click", objScan);

<label for="navn">
            <input type="text" id="field" value="Ford Mustang" class="field" name="navn">
            <input type="submit" value="send" id="send" class="send">
        </label> <p id="par"> </p>

uj5u.com熱心網友回復：

你快到了。您只需要將您的const para識別符號從更改id為class。并添加一些有意義的換行符或您希望使用的任何樣式在標簽內顯示它innerHTML

let fordMustang = {
  producer: "Ford",
  type: "Mustang",
  engine: "v8",
  horsePower: 300
}
const inputField = document.querySelector(".field");
const para = document.querySelector(".par");

function objScan() {
  const word = String(inputField.value);
  if (word == "Ford Mustang") {
    let result = ""
    Object.entries(fordMustang).map(entries => result  = entries[0]   ": "   entries[1]   "<br>")
    para.innerHTML = result
  } else {
    para.textContent = "Not recognized"
  }
}

<label for="navn">
            <input type="text" id="field" class="field" name="navn" value="Ford Mustang">
            <input type="submit" value="send" id="send" class="send" onclick="objScan()">
        </label>
<p id="par" class="par"> </p>

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

標籤：javascript 目的用户体验

上一篇：為什么我的樹視圖弄亂了tkinter中的列？

下一篇：基于第一個鍵：值對去洗掉JSON物件