javascript - 如何从输入字段中获取数值到 Bootstrap 模式？

Question

这应该是一项微不足道的任务，但由于某种原因，我无法将输入字段中的值传递/获取到 Boostrap 4 模态。当我使用以下代码时，它确实显示了所有信息，但显示了 input 的值this.qtyAskValue = document.querySelector("#qtyAsk").value.trim()。知道我的 JS 代码有什么问题吗？我正在尝试用普通的 JS 解决这个问题。

HTML

<input type="number" id="qtyAsk" name="qtyAsk" placeholder="0">
<button type="button" id="buyTicket" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">Buy</button>

JavaScript

const buyTicket = document.querySelector("#buyTicket")
buyTicket.addEventListener("click", getModalInfo)

class UI {
  constructor() {
    this.show = document.querySelector("#modalContent")
    this.qtyAskValue = document.querySelector("#qtyAsk").value.trim()
  }
  showData() {
    this.show.innerHTML = `<div class="modal-header">
      <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
      <p>You are placing an order for ${this.qtyAskValue} shares</p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
      </div>`
  }
}
const ui = new UI()

function getModalInfo() {
  ui.showData()
}

解决方案 -根据@Chris G编写的JavaScript - 这里的主要问题是构造函数在用户选择值之前很久就运行了。像这样的陈述this.qtyAskValue = document.querySelector("#qtyAsk").value.trim()不会延伸到未来；它在被调用时运行一次，然后再也不会运行，除非你再次调用它。因此this.qtyAskValue将保留""（因为这是初始值）。

const buyTicket = document.querySelector("#buyTicket")

buyTicket.addEventListener("click", getModalInfo)

class UI {
  constructor() {
    this.show = document.querySelector("#modalContent")
  }
  showData() {
    const qtyAskValue = document.querySelector("#qtyAsk").value.trim()

    this.show.innerHTML = `<div class="modal-header">
      <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body">
      <p>You are placing an order for ${qtyAskValue} shares of  at</p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
      </div>`
  }
}
const ui = new UI()

function getModalInfo() {
  ui.showData()
}

标签： javascripthtml