javascript - 如何遍历innerHtml？

嗨，我试图遍历innerHTML以获取不同的ID值，以免出现错误：无法读取null或0的属性。

我的第一部分代码为每个选择创建一个具有单个ID的循环：

for (var i = 1; i <= cantidadVegana; i++){

    $('#light').append( `
    <p>Entrada: </p>
    <select id="EntradaLightID`+ i.toString() +`">
        <option value=""></option>
        <option value="EntradaLight 1">Entrada 1</option>
        <option value="EntradaLight 2">Entrada 2</option>
        <option value="EntradaLight 3">Entrada 3</option>
    </select>
    <p>Plato fuerte: </p>
    <select id="PlatoLightID`+ i.toString() +`">
        <option value=""></option>
        <option value="PlatoLight Fuerte 1">Plato Fuerte 1</option>
        <option value="PlatoLight Fuerte 2">Plato Fuerte 2</option>
        <option value="PlatoLight Fuerte 3">Plato Fuerte 3</option>
    </select>
    <p>Postre: </p>
    <select id="PostreLightID`+ i.toString() +`">
        <option value=""></option>
        <option value="PostreLight 1">Postre 1</option>
        <option value="PostreLight 2">Postre 2</option>
        <option value="PostreLight 3">Postre 3</option>
    </select>`
    )}
}

代码的第二部分尝试获取在预览代码中创建的每个元素ID的值，并将其存储在变量中。

for(var i = 0; i<= cantidadVegana; i++){
    entradaLight=_('EntradaLightID'[i].toString()).value;
    platoFuerteLight = _('PlatoLightID'[i].toString()).value;
    PostreLight = _('PostreLightID'[i].toString()).value;
}

代码的最后部分将信息存储发送到

for(i=0; i<= cantidadVegana; i++){
    _("entradaLight")[i].toString().innerHTML = "Selecciono para la entrada light " + entradaLight[i].toString();
    _("platoFuerteLight")[i].toString().innerHTML = "Selecciono para el plato light " + platoFuerteLight[i].toString();
    _("postreLight")[i].toString().innerHTML = "Selecciono para el postre light " + PostreLight[i].toString();
}

最佳答案

你必须像这样连接字符串

    for (var i = 1; i <= cantidadVegana; i++){
    $('#light').append(''+
'<p>Entrada: </p>'+
    '<select id="EntradaLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="EntradaLight 1">Entrada 1</option>'+
        '<option value="EntradaLight 2">Entrada 2</option>'+
        '<option value="EntradaLight 3">Entrada 3</option>'+
    '</select>'+
    '<p>Plato fuerte: </p>'+
    '<select id="PlatoLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="PlatoLight Fuerte 1">Plato Fuerte 1</option>'+
        '<option value="PlatoLight Fuerte 2">Plato Fuerte 2</option>'+
        '<option value="PlatoLight Fuerte 3">Plato Fuerte 3</option>'+
    '</select>'+
    '<p>Postre: </p>'+
    '<select id="PostreLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="PostreLight 1">Postre 1</option>'+
        '<option value="PostreLight 2">Postre 2</option>'+
        '<option value="PostreLight 3">Postre 3</option>'+
    '</select>'
    )}

    var cantidadVegana = 1;
    for (var i = 1; i <= cantidadVegana; i++){
    $('#light').append(''+
'<p>Entrada: </p>'+
    '<select id="EntradaLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="EntradaLight 1">Entrada 1</option>'+
        '<option value="EntradaLight 2">Entrada 2</option>'+
        '<option value="EntradaLight 3">Entrada 3</option>'+
    '</select>'+
    '<p>Plato fuerte: </p>'+
    '<select id="PlatoLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="PlatoLight Fuerte 1">Plato Fuerte 1</option>'+
        '<option value="PlatoLight Fuerte 2">Plato Fuerte 2</option>'+
        '<option value="PlatoLight Fuerte 3">Plato Fuerte 3</option>'+
    '</select>'+
    '<p>Postre: </p>'+
    '<select id="PostreLightID'+ i.toString() +'">'+
        '<option value=""></option>'+
        '<option value="PostreLight 1">Postre 1</option>'+
        '<option value="PostreLight 2">Postre 2</option>'+
        '<option value="PostreLight 3">Postre 3</option>'+
    '</select>'
    )}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="light"></div>

关于javascript - 如何遍历innerHtml？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61982788/