Question

我是Stack Overflow的新手，老实说编码一般（图形是我的背景）。我还在学习，我的措辞可能会被取消，我提前道歉。

我正在尝试用vanilla js（或纯js）编写一个应用程序，并希望用户输入名称，然后将这些名称转换为一个数组，我以后可以将其操作为无序列表。

这是我的HTML：

<h2>Create Your Team</h2>
<input type="text" class="player" name="Player" data-player-type="player" value="enter name" />
<input type="text" class="player" name="Player" data-player-type="player" value="enter name1"/>
<input type="text" class="player" name="Player" data-player-type="player" value="enter name2"/>
<input type="text" class="player" name="Player" data-player-type="player" value="enter name3"/><br />
<input type="button" id="go" value="Go >>" onclick="createJSONObject()" />

到目前为止这是我的JS

  const inputs = document.querySelectorAll(".player")
  const values = Array.from(inputs).map(input => input.value)
  console.log('values', values);

这适用于静态输入，但我想要做的是现在获取用户的值并在提交按钮（或输入）时使该数组成为数组。

我可以请一点帮忙吗？谢谢。

这也是JSFiddle。 Link

Answer 1

您需要在按钮上创建一个事件监听器：

document.getElementById("go").addEventListener("click", function() {
    // Your JS code
});

顺便说一下，那是纯粹的JS的方式。

Answer 2

更新了你的小提琴：

https://jsfiddle.net/yoadc45c/1/

此代码：

<input type="button" id="go" value="Go >>" onclick="createJSONObject()" />

这不能在小提琴中起作用，因为a）createJSONObject没有定义，b）从js部分调用html部分的js函数不起作用。我很确定js小提琴不允许这样做。

只需使用爱德华多的例子。我的小提琴是你的代码的更新版本，加上他的事件监听器。

仅使用vanilla Javascript

2 个答案: