kann nicht HTML-Digram angezeigt werden

Ich versuche, ein Diagramm für HTML mit JavaScript zu machen. Die HTML-Seite sollte einen Div-Container enthalten, zu dem das Diagramm gehört.kann nicht HTML-Digram angezeigt werden

Ich möchte dies mit einer Funktion, die ich habe, tun; Digram (uDivHTML, uList, uWidth). Der erste Parameter nimmt einen div-internen HTML-Code an, wie im folgenden Code durch die Variable Gramm angezeigt wird.

Der zweite Parameter sollte ein Array nehmen. Das Array soll eine Zeichenkette haben, dann eine Zahl und so weiter.

Der dritte Parameter sollte eine Zahl nehmen, die verwendet wird, um die Länge jeder Pilar zu multiplizieren.

Warum funktioniert das nicht? Ich habe verschiedene Debugger ausprobiert, und habe oft darüber nachgedacht, aber ich kann nicht herausfinden, warum. Jede Hilfe ist willkommen;)

<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>

Quelle

2016-10-27 Eirik

Nun, Ihr 'baut diagram' Funktion eine Zeichenfolge, aber nicht alles mit ihm tun. Die HTML-Zeichenfolge, die Sie in der ersten Zeile des Codes extrahieren, wurde mehrmals aus dem ursprünglichen Kontext entfernt. Wenn Sie den Parameter "uDivHTML" aktualisieren, wird der Seiteninhalt nicht automatisch aktualisiert. – JJJ

Es gibt ein paar Probleme mit Ihnen Code,

Gramm Variable eine Zeichenfolge ist. Wenn die verkettete Zeichenfolge jedoch auf der Seite angezeigt werden soll, müssen Sie den Wert explizit für das DOM-Element aktualisieren, z. B. mit innerHTML.
- Sie fehlen Break-Anweisung in Ihrem Switch-Fall.
- Sie müssen einen Ereignishandler geben, der eine Signatur wie btn.onclick = function (event) {} hat. Aber Sie haben eine Signatur wie diese btn.onclick = Diagramm ("", listArray, 10). Wenn Sie so etwas haben, erhält Ihre Methode nicht die Parameter, die Sie übergeben möchten.

Ich habe Ihren Code ein wenig modifiziert, damit es funktioniert.

window.onload = function() { 
 
    var gram = document.getElementById("gram"); 
 

 
    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"; 
 
      break; 
 
     case 1: 
 
      col = "blue"; 
 
      break; 
 
     case 2: 
 
      col = "yellow"; 
 
      break; 
 
     case 3: 
 
      col = "green"; 
 
      break; 
 
     case 4: 
 
      col = "orange"; 
 
      colIndex = 0; 
 
      break; 
 
     } 
 

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

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

 
    var btn = document.getElementById("btn"); 
 
    btn.onclick = function() { 
 
    diagram(gram, myList, 10); 
 
    } 
 
}

<div id="gram"></div> 
 
<button id="btn">123</button>

Quelle

2016-10-27 19:47:38 Sreekanth

Danke Ihnen! Ich habe wenig Erfahrung mit dem HTML-DOM, also dachte ich nicht, dass das ein Problem ist, aber wenn Sie darauf hinweisen, kann ich sehen, wie das Sinn macht. Ich habe die Break-Anweisungen während des Debuggens in Frustration entfernt, als ich aufgeben wollte, und das war auch, als ich den Button hinzufügte, da ich winow.onload nicht dazu bringen konnte, auf jsfiddle zu arbeiten. Thak du wieder, für die Antwort – Eirik

Ich kann nicht sehen, wie Sie tatsächlich den Inhalt der div # Gramm aktualisieren. Sie müssen das Ergebnis von uDivHTML dem innerHTML des div zuweisen.

Quelle

2016-10-27 19:38:14 Rene

kann nicht HTML-Digram angezeigt werden

Antwort

Verwandte Themen