使用javascript动态更改HTML表单

基本上，我需要根据一个选项（可能是单选按钮）更改表单中的元素。 因此，一个页面上可能有两个表单

到目前为止，我已经想出了这个，但它似乎不工作

//javascript

function FormChange(toChange){
    if (toChange){
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type="text" name="companyname" />";
        document.getElementById('li1').innerHTML = newHTML;
}

//HTML

<form action="insert.php" method="post">
<li id="li1">Firstname: <input type="text" name="firstname" />
</form>

<input type = "button" value="Change that bad boy" onclick="FormChange(true)"/>

//javascript
功能表单更改（toChange）{
如果（改变）{
var oldHTML=document.getElementById（'li1'）.innerHTML；
var newHTML=“公司名称：”+”；
document.getElementById（'li1'）。innerHTML=newHTML；
}
//HTML
名字：

我的意图是删除firstname字段，并将其替换为companyname字段

---

非常感谢您的帮助。

请尝试在innerHTML文本中转义内部双引号。

您忘记关闭

{

修正：

函数表单更改（toChange）{
如果（改变）{
var oldHTML=document.getElementById（'li1'）.innerHTML；
var newHTML=“公司名称：”+”；
document.getElementById（'li1'）。innerHTML=newHTML；
}//为什么不使用jquery？？，执行以下操作：

$("#li1").change(function(){
alert("it changed");//here do whatever you want to
});

我认为它更简单，可读性更强。（别忘了导入Jquery库）
将两个当前答案放在一起，并添加一点错误处理：

function FormChange(toChange) {
    if (toChange) {
        var elt = document.getElementById('li1');
        if (elt) {
            var newHTML = "Company Name: " + "<input type='text' name='companyname' />";
            elt.innerHTML = newHTML;
        }
    }
}


<form action="insert.php" method="post">
<ul>
<li id="li1">Firstname: <input type="text" name="firstname" /></li>
</ul>

函数表单更改（toChange）{
如果（改变）{
var elt=document.getElementById（'li1'）；
国际单项体育联合会（英语教学）{
var newHTML=“公司名称：”+”；
elt.innerHTML=newHTML；
}
}
}

名字：


函数表单更改（toChange）{
如果（改变）{
var oldHTML=document.getElementById（'li1'）.innerHTML；
var newHTML=“公司名称：”+”；
document.getElementById（'li1'）。innerHTML=newHTML；
}
}

我做了一些调整，仅当文本为
“Firstname:”
时才进行更改，这样重复调用不会不必要地干扰DOM（请参见性能点9）

JS:

函数FormChange（）{
var obj=document.getElementById（'li1'）；
var oldHTML=obj.innerHTML.substring（0,10）；
如果（oldHTML==“Firstname:”）{
var newHTML=“公司名称：”；
obj.innerHTML=newHTML；
}
}

HTML:



名字：



进一步说明：


，
或

您需要正确地输入变量
你不关闭Li标签…这可能是一个问题。如果你把这两个答案结合在一起，你可能会得到工作代码。当你有一个JavaScript的问题来检查是否有任何错误在控制台上是很重要的。这肯定会抛出一些。哦，对不起，在我的代码中，但我没有复制其他PAR。所以我错过了，oppsjQuery当然是现代的、高级的方式，但很明显，提问者仍在学习JavaScript和HTML的基础知识。
function FormChange(toChange) {
    if (toChange) {
        var elt = document.getElementById('li1');
        if (elt) {
            var newHTML = "Company Name: " + "<input type='text' name='companyname' />";
            elt.innerHTML = newHTML;
        }
    }
}


<form action="insert.php" method="post">
<ul>
<li id="li1">Firstname: <input type="text" name="firstname" /></li>
</ul>

function FormChange(toChange){
    if (toChange){
        var oldHTML = document.getElementById('li1').innerHTML;
        var newHTML = "Company Name: " + "<input type='text' name='companyname' />";
        document.getElementById('li1').innerHTML = newHTML;
    }
}

function FormChange() {
    var obj = document.getElementById('li1');
    var oldHTML = obj.innerHTML.substring(0,10);

    if (oldHTML=="Firstname:") {
        var newHTML = "Company Name: <input type=\"text\" name=\"companyname\" />";
        obj.innerHTML = newHTML;
    }
}

<form name="myForm" action="insert.php" method="post">
    <ul>
        <li id="li1">Firstname: <input name="firstname" type="text" /></li>
    </ul>
</form>
<input type="button" onclick="FormChange();" value="Change that bad boy" />