我一直在尝试根据用户自己输入的电缆列表创建一个 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
}
我在原来的帖子中犯了一个错误...我不是想在我的 Canvas 上打印它，而是在我的 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循环中错误的电缆，我最近才发现这种技术，我想尝试一下。我现在明白它只适用于对象而不适用于数组。
最佳答案
无法使用 JavaScript 将 HTML 附加到 Canvas 。
如果您尝试在 Canvas 内呈现 radio 输入，则有点不清楚。如果是这样，那不是办法。 Canvas 不接受以这种方式呈现的元素。
要解决通过 JavaScript 生成 radio 输入的问题，方法如下:
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没有。
如果您直接在 <canvas> 中追加用 JavaScript 标记它不会显示，使用 <div>相反。
<div id="Canva"></div>
如果您想尝试一下，可以查看this working fiddle .
此外，有人已经回答了将 HTML 元素渲染到 Canvas ，看看 this answer ，如果您仍然需要将它们渲染到 Canvas 中，它可能会对您有所帮助。
编辑:
我的答案可以适应您的代码，但我会认为您只是不知道如何适应它。
Here is a fiddle您问题中较新版本的代码。检查它并告诉我这是否对您有帮助。这就是为什么你应该从一开始就指定你想要什么。
关于javascript - 如何使用 javascript 数组中的名称标签创建单选按钮列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56008677/