Question

我正在渲染这样的多种形式：

dockerspawner.DockerSpawner

这些表单没有唯一的id：s，并且DOM中始终有多个。如何运行trait = (name, dice, mod) => { return ` <tr><form action="#" onsubmit="renderRoll()"> <td><label>${name}</label></td> <td><input type="text" name="dice" value="${dice}"></td> <td><input type="text" name="mod" value="${mod}"></td> <td><input type="submit" value="Slå" name="roll" ></td> </form></tr>`; }; document.getElementById('content').innerHTML += trait;并访问触发的表单的值？

Answer 1

您必须在函数“ renderRoll（）”中传递参数才能工作。

<form action="#" onsubmit="renderRoll(event)">

function renderRoll(event) {
//here is your target...
var target = event.target;
alert(target.innerHTML);
}

Answer 2

我建议您使用唯一的ID作为表单元素的名称，如下所示：

const trait = (id, name, dice, mod) => {
    return `
    <tr><form name="${id}" action="#" onsubmit="renderRoll">
        <td><label>${name}</label></td>
        <td><input type="text" name="dice" value="${dice}"></td>
        <td><input type="text" name="mod" value="${mod}"></td>
        <td><input type="submit" value="Slå" name="roll" ></td>
    </form></tr>`;
};

document.getElementById('content').innerHTML += trait("form", "test", "test", "test");

并在触发表单时使用表单数据：

function renderRoll() {
    let data = document.forms.namedItem("form").elements;
    data = [...data].map(({name, value}) => ({name, value}));

    console.log(data)
}

我希望它会有用。

处理没有唯一ID的多种形式？

2 个答案: