Question

我正在创建一个简单的应用程序，其中用户提供一个数字，并使用给定的数字生成正方形。问题是当用户第一次提供输入时，它按预期工作，但是当用户编辑值并单击按钮时，该值与现有值相加并显示总和的平方。我想在单击按钮后重置输入，但不知道该怎么做。任何解决方案

html 代码是这样的

<div class="intro">
   <h1>Select no of squares to be made</h1>
   <small>This experience is better with the values between 400 and 600</small>
   <input type="number" id="squaresInput">
   <button class="show">Go</button>
</div>

而js文件是

const userInput = document.getElementById('squaresInput')
const btnInput = document.querySelector('.show')
btnInput.addEventListener('click', () => getUserInput())
let squaresNum

function getUserInput(){
    let squaresNum = userInput.value

    for(let i = 0; i < squaresNum; i++){
        const square = document.createElement('div')
        square.classList.add('square')
    
        square.addEventListener('mouseover', () => setColor(square))
        square.addEventListener('mouseout', () => removeColor(square))
    
        container.appendChild(square)
    }
}

Answer 1

这应该适合你：

userInput.value = ''

Answer 2

我要开始搬家了 const userInput = document.getElementById('squaresInput') 进入“getUserInput()”函数。然后把函数外的"let squaresNum"去掉，就没用了。

詹卢卡

Answer 3

您可以在函数末尾添加 userInput.value = "";，这将清除输入中的任何现有值。

const userInput = document.getElementById('squaresInput')
const btnInput = document.querySelector('.show')
btnInput.addEventListener('click', () => getUserInput())
let squaresNum;

function getUserInput(){
    let squaresNum = userInput.value

    for(let i = 0; i < squaresNum; i++){
        const square = document.createElement('div')
        square.classList.add('square')
    
        square.addEventListener('mouseover', () => setColor(square))
        square.addEventListener('mouseout', () => removeColor(square))
    
        container.appendChild(square)
    }
    
    userInput.value = "";
}

<div class="intro">
   <h1>Select no of squares to be made</h1>
   <small>This experience is better with the values between 400 and 600</small>
   <input type="number" id="squaresInput">
   <button class="show">Go</button>
   <div class="container"></div>
</div>

Answer 4

在添加更多方块之前，您需要这样的东西。

container.innerHTML = ""

开头

function getUserInput () {....

通过这种方式，您将在创建新方块之前消除先前创建的方块。

Answer 5

利用<form>。

将 <div class='intro'> 改为 <form id='intro'>
无论 .container 是什么，将其更改为 <fieldset id='container'> 或 name='container'。如果你不想要边框，在 CSS .container {border:0;}
现在您只需将 'submit' 事件注册到 <form>
1. 当点击任何 <button>、<input type='submit'> 或 <button type='submit'> 或表单控件具有焦点和用户键时 Enter/Return 'submit'事件被触发。
2. event.preventDefault() 是阻止 <form> 尝试向服务器发送数据。
3. this.reset(); 将清除 <input>
除非 setColor() 和 removeColor() 不仅仅改变 div.square 颜色，否则最好只使用 CSS。 .square {border-color: red; background: red}
通过使用 <form>，您可以使用 HTMLFormControlsCollection 和 HTML Forms API。它简洁而具体，允许更多的控制和更少的编码。

// Reference a `<form>`
const f = document.forms['id'] /*OR*/ document.forms.id // name can be used as well

// Reference all form controls within <form>
const io = f.elements;

// Reference a form control within <form>
const btn = io['id'] /*OR*/ io.id // name can be used as well

使用 createDocumentFragment(); 是因为要渲染 400 到 600 个节点实在是太多了。
还添加了 <button> 以在用户希望时清除方块。
添加了 'mouseover/out' 事件处理程序。它仅注册到父元素，而不注册到每个 .square。由于 Event Bubbling 以及 Event Delegation 如何利用它，这和 'submit' 事件是可能的。在事件处理程序 hoverGrid() 中，值、表达式、语句和函数（例如 addColor() 和 removeColor()）可以放置在 case 的适当 switch() 中.

...
case 'mouseover':
  addColor();
  break;
case 'mouseout':
  removeColor();
  break;
...

const I = document.forms.intro;
const io = I.elements;
const clr = io.clr;
const box = io.box;

I.onsubmit = createGrid;

clr.onclick = clearGrid;

box.onmouseover = hoverGrid;
box.onmouseout = hoverGrid;

function createGrid(event) {
  event.preventDefault();
  let cnt = parseInt(io.qty.value);
  let frag = document.createDocumentFragment();
  for (let i = 0; i < cnt; i++) {
    let square = document.createElement('div');
    square.className = 'square';
    square.dataset.index = i + 1;
    frag.appendChild(square);
  }
  box.appendChild(frag);
  this.reset();
  console.clear();
  console.log(box.childElementCount);
};

function clearGrid(event) {
  this.previousElementSibling.innerHTML = '';
};

function hoverGrid(event) {
  let E = event.type;
  const sqr = event.target;

  if (sqr.matches('.square')) {
    switch (E) {
      case 'mouseover':
        console.log(sqr.dataset.index);
        break;
      case 'mouseout':
        console.clear();
        break;
      default:
        break;
    }
  }
};

:root {
  font-size: 16px;
}

body {
  font-family: Consolas;
  line-height: 1;
  overflow: auto;
}

input,
button {
  display: inline-block;
  font: inherit
}

small {
  display: block;
  margin-bottom: 4px;
}

button {
  width: 4ch;
  padding: 2px 5px;
  cursor: pointer;
}

#box {
  display: flex;
  flex-flow: row wrap;
  max-width: 96vw;
  height: max-content;
}

.square {
  width: 1ch;
  height: 1ch;
  border: 1px solid black
}

.square:hover {
  border-color: red;
  background: red;
}

#clr {
  width: 9ch;
  float: right;
}


/* SO Console Display - Rightside Column */

.as-console-wrapper {
  width: 20% !important;
  font-variant: normal;
  font-weight: bold;
  color: red;
}

.as-console-row.as-console-row::after {
  content: '';
  padding: 0;
  margin: 0;
  border: 0;
  width: 0;
}

<form id="intro">
  <fieldset>
    <legend>Select no. of squares to be made</legend>
    <small>This experience is better with the values between 400 and 600</small>
    <input type="number" id="qty" min='0' max='1000'>
    <button>GO</button>
  </fieldset>
  <fieldset id='box'></fieldset>
  <button id='clr' type='button'>CLEAR</button>
</form>

单击按钮后如何重置值？

5 个答案: