Javascript can'；无法使html digram显示_Javascript_Html_Css

Javascript can'；无法使html digram显示

javascript html css

Javascript can'；无法使html digram显示,javascript,html,css,Javascript,Html,Css,我正在尝试使用JavaScript为HTML制作一个图表。HTML页面应该包含一个div容器，该容器位于图表所属的位置我想用一个主函数来实现这个功能；digram（uDivHTML、uList、uWidth）。第一个参数采用div内部html，如下面代码中变量gram所示 second参数应采用数组。数组应该有一个字符串，然后是一个数字，依此类推第三个参数应采用一个数字，用于乘以每个桩柱的长度为什么这不起作用？我一直在尝试不同的调试器，并查看了很多次，但似乎无法找到原因。感谢您的帮助；）

我正在尝试使用JavaScript为HTML制作一个图表。HTML页面应该包含一个div容器，该容器位于图表所属的位置

我想用一个主函数来实现这个功能；digram（uDivHTML、uList、uWidth）。第一个参数采用div内部html，如下面代码中变量gram所示

second参数应采用数组。数组应该有一个字符串，然后是一个数字，依此类推

第三个参数应采用一个数字，用于乘以每个桩柱的长度

为什么这不起作用？我一直在尝试不同的调试器，并查看了很多次，但似乎无法找到原因。感谢您的帮助；）


试验
123
var gram=document.getElementById（“gram”）.innerHTML；
var myList=[
“挪威语”，20，
“svergie”，17岁，
“丹麦”，23岁，
“英格兰”，11，
“美国”，64
];
功能图（uDivHTML、uList、uWidth）{
对于（var指数=0，colIndex=0；指数<（uList.length-1）；指数+=2，colIndex++）{
var-col；
开关（colIndex）{
案例0:col=“红色”；
案例1:col=“蓝色”；
案例2:col=“黄色”；
案例3:col=“绿色”；
案例4:col=“orange”colIndex=0；
}
var-wid=uWidth*uList[index+1]；
uDivHTML+=
""+
uList[索引]+“”；
}
}
var btn=document.getElementById（“btn”）；
btn.onclick=图表（克，myList，10）；

我看不出你实际上是如何更新div#gram的内容的。您必须将uDivHTML的结果分配给div的innerHTML。

我看不出您实际上是如何更新div#gram的内容的。您必须将uDivHTML的结果分配给div的innerHTML。

您的代码有几个问题

gram变量是一个字符串。但是，如果希望在页面上显示连接的字符串，则需要使用innerHTML等显式更新DOM元素的值。
- 您的开关盒中缺少break语句
- 您需要提供一个具有如下签名的事件处理程序 btn.onclick=函数（事件）{}。但是您有一个类似于btn.onclick=diagram（“，listary，10）的签名。当您有类似的内容时，您的方法将无法获得您想要传递的参数

我已经对你的代码做了一些修改，使它能够工作

window.onload=function（）{
var gram=document.getElementById（“gram”）；
var myList=[
“挪威语”，20，
“svergie”，17岁，
“丹麦”，23岁，
“英格兰”，11，
“美国”，64
];
功能图（uDivHTML、uList、uWidth）{
对于（var指数=0，colIndex=0；指数<（uList.length-1）；指数+=2，colIndex++）{
var-col；
开关（colIndex）{
案例0：
col=“红色”；
打破
案例1：
col=“蓝色”；
打破
案例2：
col=“黄色”；
打破
案例3：
col=“绿色”；
打破
案例4：
col=“橙色”；
colIndex=0；
打破
}
var-wid=uWidth*uList[index+1]；
uDivHTML.innerHTML+=
"" +
uList[索引]+“”；
}
}
var btn=document.getElementById（“btn”）；
btn.onclick=函数（）{
图表（克，myList，10）；
}
}

您的代码有几个问题

gram变量是一个字符串。但是，如果希望在页面上显示连接的字符串，则需要使用innerHTML等显式更新DOM元素的值。
- 您的开关盒中缺少break语句
- 您需要提供一个具有如下签名的事件处理程序 btn.onclick=函数（事件）{}。但是您有一个类似于btn.onclick=diagram（“，listary，10）的签名。当您有类似的内容时，您的方法将无法获得您想要传递的参数

我已经对你的代码做了一些修改，使它能够工作

window.onload=function（）{
var gram=document.getElementById（“gram”）；
var myList=[
“挪威语”，20，
“svergie”，17岁，
“丹麦”，23岁，
“英格兰”，11，
“美国”，64
];
功能图（uDivHTML、uList、uWidth）{
对于（var指数=0，colIndex=0；指数<（uList.length-1）；指数+=2，colIndex++）{
var-col；
开关（colIndex）{
案例0：
col=“红色”；
打破
案例1：
col=“蓝色”；
打破
案例2：
col=“黄色”；
打破
案例3：
col=“绿色”；
打破
案例4：
col=“橙色”；
colIndex=0；
打破
}
var-wid=uWidth*uList[index+1]；
uDivHTML.innerHTML+=
"" +
uList[索引]+“”；
}
}
var btn=document.getElementById（“btn”）；
btn.onclick=函数（）{
图表（克，myList，10）；
}
}

好吧，您的

图表

函数构建了一个字符串，但不处理它。您在代码的第一行提取的HTML字符串已多次与其原始上下文分离，更新

uDivHTML

参数不会自动更新页面内容。好的，

diagram

函数会生成字符串，但不会对其执行任何操作。您在代码的第一行提取的HTML字符串已多次与其原始上下文分离，更新

uDivHTML

参数不会自动更新页面内容。谢谢！我对HTMLDOM没有什么经验，所以我不认为这是个问题，但当你指出这一点时，我知道这是有道理的。我把断线移走了

<head>
    <title>Test</title>
    <meta charset = "UTF-8">
</head>

<body>
    <div id = "gram"></div>
    <button id = "btn">123</button>
    <script>
        var gram = document.getElementById("gram").innerHTML;

        var myList = [
          "norge",20,
          "svergie",17,
          "danmark",23,
          "england",11,
          "usa",64
        ];

        function diagram(uDivHTML, uList, uWidth) {
            for(var index = 0, colIndex = 0; index < (uList.length - 1); index+=2, colIndex++) {
                var col;

                switch(colIndex) {
                  case 0: col = "red";
                  case 1: col = "blue";
                  case 2: col = "yellow";
                  case 3: col = "green";
                  case 4: col = "orange"; colIndex = 0;
                }

                var wid = uWidth * uList[index + 1];

                uDivHTML += 
                "<div style ='height:20px;display:block;color:white;background-color:"+col+";width:"+wid+"px;'>"+
                  uList[index]+"</div>";
            }
        }

        var btn = document.getElementById("btn");

        btn.onclick = diagram(gram, myList, 10);

    </script>
</body>