Question

var change = document.getElementById('pounds');
var click = document.getElementById('convert');

click.addEventListener('click', test(e));

function test(e) {
  change.addEventListener('input', function(e) {
  let lbs = e.target.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
  });
}

<input type="text" placeholder='convert' id='pounds'>
<p>Your conversion: </p>
<p id='ounce'></p>
<button id="convert" onclick="test()">Convert Now</button>

我是JS的新手，我正在通过构建简单的东西来学习。我正在尝试构建一个磅到盎司的转换器，我知道如何在输入时获得实时值，但我想在单击按钮后得到结果。我的代码有点工作..你必须在键入之前单击按钮，但这不是我正在寻找的。我想只通过点击按钮获得价值。

如果这是一个简单的问题，我道歉，但我似乎无法弄清楚，哈哈。

Answer 1

我看到一些我想提出的事情。首先，下面我将附上一个重构版本的代码并解释为什么我按照我的方式处理某些事情。

const conversionButton = document.getElementById('convert-button');
const conversionDisplay = document.getElementById('conversion-display');
const userInput = document.getElementById('pounds-input');

conversionButton.addEventListener('click', convertPoundsToOunces);

function convertPoundsToOunces() {
  let lbs = userInput.value;
	
  conversionDisplay.innerHTML = lbs * 16;
}

<input type="text" placeholder="convert" id="pounds-input">
<p>Your conversion: </p>
<p id="conversion-display"></p>
<button id="convert-button">Convert Now</button>

我想到的第一件事是你在addEventListener方法中执行了测试函数。你想在那里引用函数，所以你会做

click.addEventListener('click', test);

而不是：

click.addEventListener('click', test());

或在这种情况下使用新变量名称：

conversionButton.addEventListener('click', convertPoundsToOunces);

这种方式在点击按钮时调用。

我注意到你也在使用onclick属性。也没有必要那样做。我们只想添加一个事件监听器，以便在单击按钮时运行单击处理程序功能。我们也可以访问输入的值，因此不需要e.target.value。在这种情况下，userInput.value会在调用convertPoundsToOunces时拉取文本输入中的值。

最后的一些想法和建议：将变量顶部更改为consts。 html属性中单引号和双引号的混合有点奇怪。我一直坚持使用html的双引号。最后，在同一个注释中，我喜欢将变量命名为非常语义的名称。 Annnndddd终于想到当用户输入除Number之外的东西时我们如何防范。希望这有用！

Answer 2

您的第二个eventListener正在侦听更改为磅。只需删除它：

var change = document.getElementById('pounds');
var click = document.getElementById('convert');

click.addEventListener('click', test);

function test(e) {
  let lbs = change.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
}

<input type="text" placeholder='convert' id='pounds'>
<p>Your conversion: </p>
<p id='ounce'></p>
<button id="convert" onclick="test()">Convert Now</button>

Answer 3

这里有几个问题。主要的是您正在立即执行test函数，而不是将其设置为事件处理程序：

click.addEventListener('click', test(e));

不要执行该功能，只需引用它：

click.addEventListener('click', test);

此外，在函数内部，您实际上并不执行计算。相反，您只是将更改处理程序设置为文本输入。（这就是为什么你需要在文本开始更新之前单击按钮。）删除该处理程序并直接调用逻辑：

function test(e) {
  let lbs = e.target.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
}

最后，在这种情况下，e不会包含您的期望。但幸运的是，无论如何你根本不需要使用它。您已经在change变量中引用了所需的元素：

function test() {
  let lbs = change.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
}

Example

通过onclick

3 个答案: