时间戳

首页 > 解决方案 > 引用的 JS 文件不会让 HTML 页面获得比第一个常量更多的信息

javascript - 引用的 JS 文件不会让 HTML 页面获得比第一个常量更多的信息

问题描述

我正在尝试为多个 HTML 文件制作一个 js 文件，以便参考各种相对快速变化的信息，这样我就不需要打开所有的 HTML 页面来找到我在每个页面中寻找的内容。据我所知，我的代码看起来不错，但唯一让我留下文本的是“模板”ID，除非它是写在 HTML 文件中的，否则我可以全部使用它们。当涉及到其中一些事情时，我是一个菜鸟......

class Price{
    constructor(price){
        this.price = price;
    }
}

const Template = new Price("0");
document.getElementById("Template").innerHTML = Template.price;

const DD = new Price("1");
document.getElementById("DD").innerHTML = DD.price;

const PrintDD = new Price("2");
document.getElementById("PrintDD").innerHTML = PrintDD.price;

const FFFF = new Price("3");
document.getElementById("FFFF").innerHTML = FFFF.price;

const TTT = new Price("4");
document.getElementById("TTT").innerHTML = TTT.price;

如果我使编码过于复杂，我不会感到惊讶，但我一直在寻找解决方案以试图解决这个问题。

标签： javascript

解决方案

如果我正确理解了这个问题，那么问题是，如果您的代码在没有元素的页面中，id="Template"那么您的代码将失败并出现异常

document.getElementById("Template").innerHTML = Template.price;

这是因为document.getElementById("Template")返回null并且您无法将属性（.innerHTML在您的情况下）分配给- 因此在引发错误null后其余代码将不会运行Uncaught TypeError

你可以这样做

class Price{
    constructor(price){
        this.price = price;
    }
    assignToId(id) {
        const element = document.getElementById(id);
        if (element) {
            element.innerHTML = this.price;
        }
    }
}

const Template = new Price("0");
Template.assignToId("Template");

const DD = new Price("1");
DD.assignToId("DD");

const PrintDD = new Price("2");
PrintDD.assignToId("PrintDD");

const FFFF = new Price("3");
FFFF.assignToId("FFFF");

const TTT = new Price("4");
TTT.assignToId("TTT");

甚至

class Price{
    constructor(price, id){
        this.price = price;
        const element = document.getElementById(id);
        if (element) {
            element.innerHTML = price;
        }
    }
}

const Template = new Price("0", "Template");
const DD = new Price("1", "DD");
const PrintDD = new Price("2", "PrintDD");
const FFFF = new Price("3", "FFFF");
const TTT = new Price("4", "TTT");

但是，除非您将class Price用于未显示的其他目的，否则最简单的代码将是

function price(price, id) {
    const element = document.getElementById(id);
    if (element) {
        element.innerHTML = price;
    }
}

price("0", "Template");
price("1", "DD");
price("2", "PrintDD");
price("3", "FFFF");
price("4", "TTT");

推荐阅读