无法使用JavaScript将HTML附加到画布上。

Question

我一直试图从用户自己输入的电缆列表创建HTML单选按钮列表。数据进入CableList数组，该数组包含具有许多属性（包括名称）的对象列表。我要创建带有CableList长度的单选按钮列表，并将名称分配给单选按钮。

我完全熟悉for循环概念，但是我不熟悉其他人使用的appendchild方法。我是HTML / JavaScript的新手，将不胜感激。

这只是我的一些想法，但是根本不起作用，我也不知道该怎么做。

function createRadioList(CableList){
    var c = document.getElementById("Canva");
    var ctx = c.getContext('2d');


    for (Cables in CableList) {
        var Cable = document.createElement('input');
        Cable.setAttribute('type', 'radio');
        Cable.setAttribute('name', 'choice');

        document.getElementById().appendChild(Cable);
    }

}

我的预期结果只是一个单选按钮列表，并附加了电缆列表的名称属性。

编辑：谢谢大家的答复。这是我当前的HTML文件：

<!DOCTYPE html>
<!--Created by: Philippe Gauthier 04/2019-->
<html>
<head>
    <script language="JavaScript" src="DrawCables.js"></script>
    <script language="JavaScript" src="drawingFunctions.js"></script>
</head>    
<body>

    <h2>Cable drawing function</h2>
    <canvas id = "Canva" width = "750" height="750"></canvas>
    <canvas id = "Legend" width = "250" height="750"></canvas>
    <form>
        <input type="radio" id="AllCables" > Show all cables<br>
        <script>createRadioList(CableList)</script>  
    </form> 
    <br>
    <!-- Rectangular switch -->
    Show cable names <input type="checkbox" id="CablenamesBox"><br>
    Show axis <input type="checkbox" id="AxisBox"><br>
    Show grid (NOT SETUP) <input type="checkbox" id="GridBox"><br>
    <script>MakeLegend()</script>
    <button onclick="InitializeDrawing()" type = "button">Draw Cables</button>
</body>
</html>

相关的javascript代码

function Singlecore(X,Y,totalradius,outerradius,innerradius,name){
    this.Center = [X,Y];
    this.TotalRadius = totalradius;
    this.ConductorOuterRadiusList = outerradius;
    this.ConductorInnerRadiusList = innerradius; 
    this.Type = "Singlecore";
    this.Name = name;
}

//Creates a PipeType cable type object
//The X and Y position of sub-singlecores are relative to the center of the main pipe
function Pipetype(X,Y,totalradius,name){
    this.InnerCablesList=[]
    this.Center = [X,Y];
    this.TotalRadius = totalradius;
    this.Type="Pipetype";
    this.Name=name
    for (var n=0;n<(arguments.length-4);n++){
        this.InnerCablesList=this.InnerCablesList.concat(arguments[n+4]);
    }
}
//Global, could be reorganised / changed

function CreateCableList(){
    //Creating objects and placing them in a list
    var C1 = new Singlecore(0,0,350,[300,250],[275,0],"Cable1");
    var C2 = new Singlecore(1000,2000,350,[300,250],[275,0],"Cable2");
    var C3 = new Singlecore(20,-2000,350,[300,250],[275,0],"Cable3");
    var C4 = new Pipetype(1000,-1000,100,"Cable4",new Singlecore(50,50,20,[15,5],[7,0]), new Singlecore(10,-5,15,[10,7],[8,0]));
    var C5 = new Singlecore(2000,-100,500,[300,250],[275,0],"Cable5");
    ListOfConductors = [C1,C2,C3,C4,C5];
    return ListOfConductors
}

我在原始帖子中犯了一个错误...我不是想在画布上打印而是在HTML上打印。我想要这样的结果（示例取自网络）：

<form action="">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

我没有设置3个单选按钮，而是尝试为电缆列表中的每条电缆设置一个单选按钮，并分配对象的相应名称。至于for循环中错误的电缆，我最近才发现该技术，我想尝试一下。我现在知道它仅适用于对象，而不适用于数组。

Answer 1

无法使用JavaScript将HTML附加到画布上。

如果您要在画布内渲染无线电输入，可能还不清楚。如果是这样，那不是办法。画布不接受这种渲染元素。

要解决通过JavaScript生成无线电输入的问题，请采用以下方式：

const container = document.querySelector("#Canva"),
      createRadioInputs = (items) => {
        items.forEach(i => {
            let input = document.createElement("input"),
                label = document.createElement("label");
            input.setAttribute("type", "radio");
            input.setAttribute("value", i);
            input.setAttribute("name", i);
            label.setAttribute("for", i);
            label.innerText = i;
            container.append(input);
            container.append(label);
        });
    }

createRadioInputs(["Item1", "Item2", "Item3", "Totally different item"]);

为什么用innerText而不是innerHTML？：

在这种情况下，由于您只需要附加文本而不是HTML，innerText可以提供更好的性能，因为innerHTML必须解析您提供的字符串。 innerText不会。

如果您直接在带有JavaScript的<canvas>标签内附加，但不会显示，请改用<div>。

<div id="Canva"></div>

如果您想尝试一下，可以检查this working fiddle。

另外，已经回答过将HTML元素渲染到画布的人，看看this answer，如果仍然需要将它们渲染到画布中，可能会有所帮助。

编辑：

我的答案适合您的代码，但我认为您只是不知道如何适应它。

Here is a fiddle您问题中较新版本的代码。检查一下，告诉我是否有帮助。这就是为什么从一开始就应该指定想要的东西。

Answer 2

添加id和value进行标记，然后即可正常工作。

function createRadioList(cables) {
    var canvas = document.getElementById("Canva");

    for (var i = 0; i < cables.length; i++) {

        var radio = document.createElement('input');
        radio.setAttribute('id', 'cable_' + i);
        radio.setAttribute('type', 'radio');
        radio.setAttribute('name', 'choice');
        radio.setAttribute('value', cables[i])

        var label = document.createElement('label');
        label.setAttribute('for', 'radio_' + i);
        label.setAttribute('title', cables[i]);
        label.innerText = cables[i];

        canvas.appendChild(radio);
        canvas.appendChild(label);
    }

}

createRadioList(['a', 'b']);

如何使用来自JavaScript数组的名称标签创建单选按钮列表

2 个答案:

无法使用JavaScript将HTML附加到画布上。

为什么用innerText而不是innerHTML？：

编辑：