在这里做错了什么？

Question

输入值总是先进入 if 条件，甚至将其解析为 parseInt() 并且当页面用数字刷新时，它会进入 else 条件，比如它没有首先注册 inputValue，如果我添加了一个提交事件而不是单击一个事件不会触发。

HTML
<div class="addHere"></div>
  <div class="inputs">
    <input type="text" maxlength="1" class="inputValue" placeholder="insert numbers:"/>
    <button class="btn">+</button>
  </div>

javaScript
    // this line was modified
    const inputValue = parseInt(document.querySelector(".inputValue").value);
    
    const div = document.querySelector(".addHere");
    
    document.querySelector(".btn").addEventListener("click", addInputs);
    
    fucntion addInputs() {
    if(isNaN(inputValue)) {
    alert("Wrong input");
    } else {
    for ( let i = 1; i <= inputValue; i++) {
      const form = document.createElement("form");
          form.method = "post";
          form.action = "#";
    
          const input1 = document.createElement("input");
          input1.type = "text";
          input1.maxLength = "12";
          input1.className = "factor";
          input1.required = true;
    
          const input2 = document.createElement("input");
          input2.type = "text";
          input2.maxLength = "1";
          input2.className = "priority";
          input2.required = true;
    
          const br = document.createElement("br");
    
          form.appendChild(br.cloneNode());
          form.appendChild(input1);
          form.appendChild(input2);
          form.appendChild(br.cloneNode());
    
          div.appendChild(form);
        }
    
        const sub = document.createElement("button");
        sub.type = "submit";
        sub.value = "Submit";
        sub.className = "subButton";
        sub.textContent = "Submit";
    
        div.appendChild(sub);
      }
    }

Answer 1

const inputValue = parseInt(document.querySelector(".inputValue").value);

被执行一次，所以每次你点击+按钮它都不会读取标签的值。您必须在单击处理程序中移动此语句，如下所示：

function addInputs() {
  // this should be here, so every time you click on + button, actuall values is being read
  const inputValue = parseInt(document.querySelector(".inputValue").value);
  if (isNaN(inputValue)) {
    alert("Wrong input");
  } else {
    for (let i = 1; i <= inputValue; i++) {
      const form = document.createElement("form");
  ...

也在这里：

const div = document.querySelector(".addHere");

我在您的 HTML 中找不到具有此类的 div，因此您必须像这样添加它，我认为：

  <div class="inputs">
    <input type="text" maxlength="1" class="inputValue" placeholder="insert numbers:" />
    <button class="btn">+</button>
  </div>
  <div class="addHere"> </div>

Answer 2

您正在记录页面加载时输入的值，所以一开始它是空的。

移动这条线

    const inputValue = parseInt(document.querySelector(".inputValue").value);

成为您的函数在单击按钮后运行的第一行。

    function addInputs() {
    const inputValue = parseInt(document.querySelector(".inputValue").value);

此外，最好对这些元素使用 ID，并通过它们的 ID 而不是类来选择它们。 ID 是唯一的，因此页面上只能有其中一个。

我还更正了这些行中的拼写错误，缺少 " 和拼写错误的函数。

Answer 3

您在 javascript 代码的第一行中忘记了 "。

const inputValue = parseInt(document.querySelector(".inputValue").value);

Answer 4

const div = document.querySelector(".addHere");
document.querySelector(".btn").addEventListener("click", addInputs);

function addInputs() {

  const inputValue = parseInt(document.querySelector(".inputValue").value);

  for (let i = 1; i <= inputValue; i++) {
    const form = document.createElement("form");
    form.method = "post";
    form.action = "#";

    const input1 = document.createElement("input");
    input1.type = "text";
    input1.maxLength = "12";
    input1.className = "factor";
    input1.required = true;

    const input2 = document.createElement("input");
    input2.type = "text";
    input2.maxLength = "1";
    input2.className = "priority";
    input2.required = true;

    const br = document.createElement("br");

    form.appendChild(br.cloneNode());
    form.appendChild(input1);
    form.appendChild(input2);
    form.appendChild(br.cloneNode());

    div.appendChild(form);
  }

  const sub = document.createElement("button");
  sub.type = "submit";
  sub.value = "Submit";
  sub.className = "subButton";
  sub.textContent = "Submit";

  div.appendChild(sub);

}

<div class="addHere"></div>
<div class="inputs">
  <input type="number" min="0" max="9"  class="inputValue" placeholder="insert numbers:" />
  <button class="btn">+</button>
</div>