时间戳

首页 > 解决方案 > 我将如何在一个元素上应用多个函数并将元素本身存储为 javascript 中的自定义图形？

javascript - 我将如何在一个元素上应用多个函数并将元素本身存储为 javascript 中的自定义图形？

问题描述

我正在尝试为某些链接创建图表，当您单击它们以计算点击次数时，同时创建一个新元素，更具体地说是 DIV 元素本身。现在首先我将添加代码，以便您可以更好地查看它，然后尝试解释。我的

索引.html

<input type="submit" id="btn" value="add element"><br><br><br>

<input type="submit" id="inc" value="increase element"><br><br><br><br>

<p id="result"></p>

<div id="box"></div>

 <script src="main.js"></script>

至于 css 我有这个代码，只是基本的样式

    #box{
    position: absolute;;
    bottom: 10px;
    left:0px;
    width: 100%;
    height: 400px;
    background-color: red;

}
.div{
    margin-left: 10px;
    position: relative;
    left: 0px;
    top: 380px;
    display: inline-block;
    width:10px;
    height: 0px;
    background-color: green;
}

现在我为 main.js 拥有的 java 脚本文件是这个：

    var btn=document.getElementById("btn");
var box=document.getElementById("box");
var link=document.getElementById("inc");

var para=document.getElementById("result");


btn.onclick=function(){

    var div=document.createElement("div");

    div.classList.add("div");

    div.setAttribute("class","div");

    box.appendChild(div);

    var click=0;

    link.onclick=function(){


        var setClick=click++;


        var h=div.offsetHeight;

        var newheight=1;

        div.style.height=h+newheight+"px";;

        para.innerHTML=setClick;

      }
}

现在这段代码的目标是：

1）每当我按下输入按钮添加元素时，我都会尝试创建一个新元素，该元素会在 div 中创建一个新的 Div 元素，其 id 为“box”。之后

2）我试图通过单击下一个输入按钮增加元素将新创建的 div 的高度始终动态增加 5px 或任何其他值。这意味着对于我单独创建的每个 div。

3）然后我想要做的是将这些值存储在本地存储中，无论它是否合适，以便在刷新后我想要将 div 框与点击计数一起丢失。

现在代码运行良好，只是我遇到了一些问题。第一个问题发生在我创建第一个 div 时，它通常向上增加高度，直到单击 15 然后开始向下增加高度，创建的其他 div 正常破坏。至于其他问题，总是点击。所以请有人帮我写代码，告诉我天气我做错了什么以及如何纠正它。通过避免创建这样的代码将是什么步骤。感谢任何人的帮助。

标签： javascriptlocal-storage

解决方案

我认为问题可能是由于创建的 div 的相对位置。我稍微重构了你的代码。这可能会按照您想要的方式工作。

在第一次单击添加按钮之前，我禁用了增加按钮。

div 类（重命名为 bar）是绝对定位的。它们的left属性在创建时设置。不再需要内联块显示。

在脚本中，我添加了一个变量numDiv来计算创建的 div 并将其用作 id 来更改最后创建的 div 的高度。

var btn=document.getElementById("btn");
var box=document.getElementById("box");
var link=document.getElementById("inc");
var para=document.getElementById("result");

let click = 0;
let numDiv = -1;
btn.onclick=function(){
    link.disabled = false;
    click = 0;
    para.innerHTML=click;
    let div=document.createElement("div");
    div.classList.add("bar");
    numDiv++; 
    div.id = 'div'+numDiv;
    div.style.left = 20 * numDiv + 'px';
    box.appendChild(div);
}
link.onclick=function(){
  click++;
  document.getElementById('div'+numDiv).style.height = click+'px';
  para.innerHTML=click;
}
#box{
    position: absolute;;
    width: 200px;
    height: 100px;
    background-color: red;
}
.bar{
    margin-left: 10px;
    position: absolute;
    bottom: 0px;
    width:10px;
    height: 0px;
    background-color: green;
}
<input type="button" id="btn" value="add element">
<input type="button" disabled='true' id="inc" value="increase element">
<p id="result">0</p>
<div id="box"></div>

推荐阅读