如何仅使用 JavaScript 创建 DIV onclick？答案

【问题标题】：How to create a DIV onclick using only JavaScript?如何仅使用 JavaScript 创建 DIV onclick？
【发布时间】：2020-05-10 23:50:48
【问题描述】：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <link rel="stylesheet" type="text/css" href="style.css">
      <title>Etch-A-Sketch</title>
  </head>
  <body>

      <h1>Etch-A-Sketch</h1>
      <p id="Grid-Size">Grid Size</p> 
      <form onsubmit="getTotalGridSize()"> <!--onsubmit has to be on the form tag not the submit input-->
        <input type="number" placeholder="size" min="1" max="100" id ="size" value="" oninput="getSizeValue()">
        <input type="submit" id="Submit" value="Submit" onclick="createTile()">
      </form>
      <p id="Colors">Choose Color</p> 

     <form id="color-options" >
       <input type="radio" name="choice" value="blue">
       <label for="default">Default</label>
       <input type="radio" name="choice" value="random"  >
       <label for="random">Random</label>
       <input type="radio" name="choice" value="white" >
       <label for="white">White</label>
       <input type="radio" name="choice" value="user" >
       <label for="color-picker">Color Picker</label>
       <input type="color" id="color-picker" value=""> 
     </form>
      <div id="Sketch">

        <div id="tile" onmouseover="updateHoverColor()">

        </div>
      </div>

      <script src="etch.js" charset="utf-8"></script>
  </body>
  </html>


//Dom Accessed Variables

    let tile = document.getElementById("tile")
    let sizeValue = null
    let gridSize= null 
    let containerDiv = document.getElementById("sketch")

//input functions 

    function getSizeValue() {
        sizeValue = document.getElementById('size').value //getting the inputs value
    }

    function getTotalGridSize() {
        gridSize = sizeValue * sizeValue

    }

    //Generates random RGB values
    function randomColor() {
        let red = Math.floor(Math.random() * 255 + 1);
        let blue = Math.floor(Math.random() * 255 + 1);
        let green = Math.floor(Math.random() * 255 + 1);
        //Returns string with style to be applied
        let random = `rgb(${red}, ${green}, ${blue})`;
        tile.style.backgroundColor = random;

  }

  function updateHoverColor() {
    let colorChoice = document.getElementById("color-picker").value
    if(document.querySelector('#color-options > input:checked').value === "blue") {
        tile.style.backgroundColor = "blue"
    } else if (document.querySelector('#color-options > input:checked').value === "random") {
        randomColor()
    } else if (document.querySelector('#color-options > input:checked').value === "white") {
        tile.style.backgroundColor = "white"
    } else if (document.querySelector('#color-options > input:checked').value === "user") {
        tile.style.backgroundColor = colorChoice;
    }
  }

  function createTile() {
      let baby = document.createElement("div");
      baby.style.height = "200px"
      baby.style.width = "100px"
      baby.style.backgroundColor = "black"
      document.body.appendChild(baby)

  }

我要做的是在用户单击提交按钮后在其容器 div 内创建另一个 div。我使用 JavaScript 创建了一个函数，然后将其附加到同一按钮上的onclick。我什至遵循完全相同的语法从 W3schools 创建函数来创建和附加元素，但它似乎在我的代码中根本不起作用，我正试图找出原因。

【问题讨论】：

标签： javascript html css dom-events

【解决方案1】：

第一个表单中的提交按钮有一个onclick，但是包含的表单也有一个onsubmit。这将导致一些关于什么函数被触发以及何时触发的不一致行为。坚持使用onsubmit 的形式。我也建议不要用 HTML 附加事件监听器，而是给表单一个 ID，然后通过 ID 附加事件监听器。

// HTML
<form id="totalGridSizeForm">

// JavaScript
const gridSizeForm = document.getElementById("totalGridSizeForm");
gridSizeForm.addEventListener("submit", (event) => {
  event.preventDefault();
  // Whatever logic you need goes here
});

【讨论】：

我逐字逐句地尝试了这个代码，并将我的 createTile 函数放入其中，但它仍然没有做任何事情。当我尝试其他逻辑（如警报（“Hello”）或调用另一个函数时，它似乎有效。我的 createTile 函数似乎有问题，但我不知道为什么。

【解决方案2】：

您的应用程序的主要问题是，当您提交一些表单、发送信息并刷新页面时，您的 div 可能正在创建但后来由于页面重新加载而被删除。

最好的选择是将某些条件保存在 LocalStorage 中，并且每次刷新后如果页面满足特殊条件将显示 div。示例如下：

function saveInformation(func) {

    var funcs = [
      'size',
      'save'
    ] 
    
    if (func==funcs[0]) {
        sizeValue = document.getElementById('size').value;
}
    if (func==funcs[1]) {
         localStorage.setItem('saveCheck','true');
}
    return false;
}

function check() {
    var saveCheck = localStorage.getItem('saveCheck');
    if (saveCheck == 'true') {
      generateDIV();
    } 

}

function generateDIV() {
    let element = document.createElement("div");
    element.style.height = "200px";
    element.style.width = "100px";
    element.style.backgroundColor = "black";
    document.body.appendChild(element);
}

document.addEventListener('DOMContentLoaded',function() {
    check();
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/html/b.js"></script>
    <title>Document</title>
</head>
<body>
    <form>
      <input type='number' placeholder='Number' id='size'>
      <input type='submit' onclick='saveInformation("size");saveInformation("save");'>
    </form>
</body>
</html>

编辑：我无法从堆栈溢出代码 sn-p 保存到本地存储，因此您需要从编辑器中测试此代码

我所做的是我用“return false”禁用了提交按钮，但我们仍然从输入值中获取信息，只是没有重新加载并使用显示的 div。

所以想法是有一个函数来保存来自输入值的信息并将名为“saveCheck”的布尔值保存到本地存储中。如果本地存储中给定的 'saveCheck' 为真，我们将调用 'generateDIV()' 并从那里每次页面刷新时加载该 div。

这是一个纯 Javascript 的示例，但如果还没有的话，我建议你开始使用 JQuery。

希望我能帮上忙！

【讨论】：

我对localStorage不太熟悉，代码是什么样的？
您好，我尝试过这样做，但对我也不起作用。我只是将输入类型更改为按钮，然后从那里使用 onclick。我觉得那不那么复杂，但到目前为止它已经完成了工作。不过谢谢你的建议！如果我再次遇到这个问题，我一定会调查的。