dilongzuyj 2024-02-03 10:56 采纳率: 85.7%
浏览 12

这是一个不知为啥的前端问题

问题很奇怪，我本来想编一个辅助创建ui的js库，but，出错了

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#area{
  background-color: #AEEAAE;
  width: 600px;
  height: 450px;
}
#ball{
  background-color: #BAF;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>
</head>
<body>
<script>
var ui = {
  writeDOM:function(td){
    document.write();
    document.write(td);
  },
  setTitle:function(txt){
    document.getElementsByTagName("title")[0].innerHTML = txt;
  },
  newTitle:function(){
    let title = document.createElement("title");
    document.head.appendChild(title);
  },
  addTo:function(ele, to){
    to.appendChild(ele);
  },
  labelAdd:function(label, input, p){
    let ltg  = document.createElement("label");
    let txt = document.createTextNode(label);
    ltg.appendChild(txt);
    ltg.appendChild(input);
    p.appendChild(ltg);
  },
  setSize:function setSize(who, size, wb, hb){
    who.style.width =(size / 2 * wb)+ "px";
    who.style.height =(size / 2 * hb)+ "px";
  },
  message:function(text, size, l, h, p){
    let b1 = document.createElement("div"), b2 = document.createElement("div");
    b1.setAttribute("class", "button1");
    b2.setAttribute("class", "button2");
    let agent = document.createElement("div");
    agent.setAttribute("class", "agent");
    agent.setAttribute("style", `position:relative;top:${h}px;`);
    let txt = document.createElement("span");
    txt.setAttribute("class", "txt");
    txt.setAttribute("style", "position:absolute;top:30px;");
    agent.appendChild(b1);
    agent.appendChild(b2);
    agent.appendChild(txt);
    ui.setSize(agent, size, 2, 1);
    agent.style.backgroundColor = "grey";
    agent.style.left = l;
    txt.innerHTML = text;
    var x = l +(size / 2);
    b1.setAttribute("style", "position:absolute;");
    b2.setAttribute("style", "position:absolute;");
    b1.style.left = '-1px';
    b2.style.left = `${size / 2 + 1}px`;
    b1.style.top = `${size / 2}px`;
    b2.style.top = `${size / 2}px`;
    var os = size / 2;
    ui.setSize(b1, os, 2, 1);
    ui.setSize(b2, os, 2, 1);
    b1.style.backgroundColor = "#555";
    b2.style.backgroundColor = "#555";
    b1.setAttribute("onclick", `${b1}.remove;${b2}.remove;${txt}.remove;${agent}.remove;`);
    b2.setAttribute("onclick", `${b1}.remove;${b2}.remove;${txt}.remove;${agent}.remove;`);
    p.appendChild(agent);
  }
}
//实例：

//这段代码用于添加并修改标题
ui.newTitle();
ui.setTitle("小球撞撞撞");

var ball = document.createElement("div");
var area = document.createElement("div");
ball.setAttribute("id", "ball");
area.setAttribute("id", "area");

//这段代码添加元素
ui.addTo(area, document.body);
ui.addTo(ball, area);

var inp = document.createElement("input");

//这段代码用来给input标签添加label
ui.labelAdd("控制方向>>>", inp, document.body);

//这段代码可以创造一个框
ui.message("欢迎你！", 250, 250, 0, document.body);
</script>
</body>
</html>

求答！

  • 写回答

1条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-02-03 10:59
    关注

    引自免费微信小程序：皆我百晓生

    根据您提供的代码，前端问题出在以下几点：

    1. document.write() 的使用不正确 在 writeDOM 函数中，document.write() 方法被调用但没有传入任何参数。而且，在现代网页开发中，直接使用 document.write() 通常不是一个好的实践，因为它会重写整个文档流，尤其是在文档已经加载完毕后再调用时。

      // 建议改为创建或修改 DOM 元素的方式
var ui = {
  writeDOM: function(td) {
    let container = document.createElement('div');
    container.innerHTML = td;
    document.body.appendChild(container);
  },
// ...

    2. 事件绑定的错误 在 message 函数中，给按钮元素添加了 onclick 属性来绑定点击事件，但是这种方式是旧版 JavaScript 的做法，容易出错，并且在这里它尝试直接删除元素的方法也是错误的。应使用 addEventListener 方法来正确绑定事件处理函数。

      // 修改为使用 addEventListener
ui.message = function(text, size, l, h, p) {
  // ...
  b1.addEventListener("click", function() {
    agent.remove();
    txt.remove();
    b1.remove();
    b2.remove();
  });
  b2.addEventListener("click", function() {
    agent.remove();
    txt.remove();
    b1.remove();
    b2.remove();
  });
  // ...
}

    3. 潜在的问题 虽然代码可以运行，但还有一些改进点：

      • 您可能希望将生成的消息框、文本、按钮等附加到特定父元素上，而不是直接附加到 document.body。
      • 不要在 HTML 中直接编写脚本，而是将其放在 <script> 标签中或者外部文件中，然后在合适的位置（如 DOMContentLoaded 事件触发后）执行初始化和创建 UI 的逻辑。

    针对以上问题，优化后的 message 函数以及相关部分的代码如下：

    var ui = {
  // ... 其他函数不变 ...

  message: function(text, size, l, h, p) {
    let b1 = document.createElement("div"), 
        b2 = document.createElement("div"),
        agent = document.createElement("div"),
        txt = document.createElement("span");

    // 设置样式及属性
    // ... 与原代码相同的部分 ...

    // 绑定点击事件
    b1.addEventListener("click", function() {
      agent.remove();
      txt.remove();
      b1.remove();
      b2.remove();
    });
    b2.addEventListener("click", function() {
      agent.remove();
      txt.remove();
      b1.remove();
      b2.remove();
    });

    // 添加到目标父元素 p
    p.appendChild(agent);

    // 将文本添加到 span 中
    txt.innerHTML = text;

    // 添加其他子元素到 agent
    agent.appendChild(txt);
    agent.appendChild(b1);
    agent.appendChild(b2);
  }
};

// 确保在 DOMContentLoaded 后执行实例化操作
document.addEventListener('DOMContentLoaded', function() {
  // ... 初始化标题、添加元素等操作 ...

  // 创建消息框并附加到 area 上
  ui.message("欢迎你！", 250, 250, 0, area);
});

    这样修正之后，您的库应该能够正常工作，同时遵循了更好的前端编程实践。

    评论

报告相同问题？

  • 一探前端开发中的JS调试技巧
    2021-02-26 00:48
    本文将一一讲解各种前端JS调试技巧，也许你已经熟练掌握，那让我们一起来温习，也许有你没见过的方法，不妨一起来学习，也许你尚不知如何调试，赶紧趁此机会填补空白。骨灰级调试大师Alert那还是互联网刚刚起步的...
  • 2024前端算法面试（高频题库&题目解析）
    2024-08-14 14:00
    一站式解决前端面试遇到的算法问题，咱们只专注于前端高频算法。 解决痛点： （1）LeetCode 题目太多，不知从何刷起？面试题目有些是前端常考，有些是后端常考？ 答：本站参照 CodeTop上的前端算法...
  • web前端开发学习路线要点PDF
    2025-07-03 13:57
    网页制作是计算机专业同学在大学期间都会接触到的一门课程，而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver，这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便。入门快、见效快让...
  • 前端求职难？那是你没看见这个
    2022-06-29 18:27
    我想去吃ya的博客 相信大部分在学习的时候都会面临这样的问题，毕竟学习完的最终目的还是能够找到一个心仪的工作~ 不过也不用头疼~ 找工作除了你自身的技术条件要过关之外，面试简历可以说的非常重要的了~ 一份优秀的简历可以让HR对你...
  • 前端不得不知的Nginx配置～
    2025-03-07 20:48
    Yan_an_n的博客 前端需要知道的Nginx配置总结，简单明了，涉及：Nginx反向代理【跨域】、Nginx域名根目录文件配置、Nginx负载均衡、Nginx静态资源服务配置等，
  • 前端 threejs 3D饼图 通过一些配置可以实现3D饼图的生成
    2022-06-19 00:14
    通过threejs实现的3D饼图图表，数据可视化的高度应用场景中2D图表居多，3D相关的数据可视化比较少，不知收费贵而且资源少之又少，在项目中需要使用时对于初步接触的开发的人员很不友好，希望大家通过本案例可以快速...
  • 不可不知的前端工程化 —— 初识篇
    2024-09-04 16:02
    码农巧克零的博客 前端工程化的思路是将前端整个开发的过程、技术、工具、经验等规范化、标准化，以提高效率和降低成本，对于日常被工程化环境下裹挟的工程师们，不管是前端团队的leader，还是具体模块的开发者，理解并有效的在项目中...
  • vuebase:一个基于vue的基础前端框架
    2021-05-11 15:10
    参考了许多例子，写了这个符合本人当前需求的框架，不知是否也恰好是你的诉求? 本案例的主要目的是：构建后台管理系统的base框架（前端） 基于vue全家桶，element-ui 提供开发规范及文件目录说明 可自动配置多开发/...
  • 前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
    2022-02-21 00:25
    文默的博客 文章目录前言第一回合一、知识点：cookie（21/09/06）二、知识点：节流和防抖（21/09/07）三、知识点：var和let以及const（21/09/08）四：知识点：深拷贝和浅拷贝（21/09/09）五、知识点：作用域和作用域联（21/09/...
  • 告别懵逼——前端项目调试与问题排查方法小结
    2024-09-03 16:12
    东扯葫芦西扯瓜的博客 接手无文档的老项目1、情景描述： 你接手了一个历史久远的项目，项目文档缺失，前任开发者已经离开，而你对当前的业务逻辑和代码结构都不熟悉。然而，线上系统出现了故障，需要紧急解决。项目中出现难以复现的幽灵...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 2月3日