我需要帮助为 html 文本字段创建动态值属性

Question

我正在寻找一个非常特殊的主题的帮助。 我正在尝试使用document.getElementById更改文本字段内的默认值，但是我运气不佳。

我在脚本下面描述了 $name 的原因是因为整个内容都在 for 循环中以创建这些名称的列表。 当它调用函数时，查找元素 id 没有问题，因为它们已经创建。

这段代码混合使用了 php 和 html（你会看到一个$dataarray[$i]['AI'] ，这是一个用于指向正确信息的自动递增数字）：

<?php
    $name = "";
if($owner == 1)
{
    $btnEdit = '<span id="btnEdit'.$dataarray[$i]['AI'].'"><button type="button" onclick="EditName('.$dataarray[$i]['AI'].', \''.$dataarray[$i]['lastname'].'\', \''.$dataarray[$i]['firstname'].'\');">Edit Name</button></span>';
    ?><script>
    function EditName(logai, lastname, firstname)
    {
        window.stop();
        var btnEditID = "btnEdit" + logai;
        var editNameID = "editName" + logai;
        document.getElementById(editNameID).innerHTML = '<input type="text" id="Lname" value="'+lastname+'" size="10">, <input type="text" id="Fname" value="' + firstname + '" size="10">';
        document.getElementById(btnEditID).innerHTML = '<button type="button" onclick="SubmitName('+logai+', \''+lastname+'\', \''+firstname+'\');">Submit Name</button>  <button type="button" onclick="CancelEdit(\''+btnEditID+'\', \''+editNameID+'\', '+logai+', \''+lastname+'\', \''+firstname+'\');">Cancel Edit</button><br>';
    }
    function SubmitName(logai, lastname, firstname)
    {
        // old: lastname = document.getElementById(Lname).value;
        lastname = Lname.value;
        // old: firstname = document.getElementById(Fname).value;
        firstname = Fname.value;
        // Don't worry about the ajax code, I made sure it works:
        //     it just updates the record at the given incrementing number
        $.ajax({ type:'POST',
            url:'/bin/editPersonName.php',
            data:{ai:logai, fname:firstname, lname:lastname},
            success:function(data2){
                console.log(data2);
            }
        });
//      location.reload();
    }
    function CancelEdit(btnEditID, editNameID, logai, lastname, firstname)
    {
        document.getElementById(btnEditID).innerHTML = '<button type="button" onclick="EditName('+logai+', \''+lastname+'\', \''+firstname+'\');">Edit Name</button>';
        document.getElementById(editNameID).innerHTML = '<input type="text" name="Name" value="'+lastname+', '+firstname+'" readonly>';
        // There is no way to turn refresh back on, so we simply have to reload the page
        location.reload();
    }
    </script><?php
    $name = '<span id="editName'.$dataarray[$i]['AI'].'"><input type="text" name="Name" value="'.$dataarray[$i]['lastname'].', '.$dataarray[$i]['firstname'].'" readonly></span>';
}

进展顺序如下：

1) 在名称文本字段中看到弹出的名称，旁边有一个编辑按钮

2) 通知名称拼写错误，请点击编辑按钮

3) 单击编辑按钮，它变成 2 个按钮（一个提交按钮和一个取消按钮），而名称字段变成两个用逗号分隔的文本字段（姓氏，名字方向）

4) 在文本字段中输入您想要的更改，然后单击提交按钮

5）提交按钮从两个文本字段中获取新文本并更新给定ai位置的名称（这是我遇到问题的地方；它没有在姓氏，名字字段中输入新内容）

6）页面重新加载做一些事情：更新填写的信息，重置字段布局，并“打开”页面的自动刷新（我有location.reload()注释以查看它在ajax上返回的消息；其中只是一个通过/失败消息）

（注意：如果有一段放在错误的位置，我很抱歉，我有点时间紧迫，今天早上我没有足够的时间检查文学敏感性）

Answer 1

document.getElementById()函数的参数必须是字符串，但您为其提供了未定义的变量。

lastname = document.getElementById('Lname').value;
firstname = document.getElementById('Fname').value;

Answer 2

更新：在开发工具的控制台中输入document.getElementById(Lname)和Lname ，我有了一个想法：如果我只是将 lastname & firstname 设置为Lname.value & Fname.value会发生什么？ 发生的事情是它解决了我的问题（我的同事让我想到了它，因为他想看看在控制台中输入 getElementById 会做什么）。 这可能是导致它的范围问题，但这绝对是人们应该从我的错误中采取的步骤：

如果元素在按文档搜索时返回 null，请尝试查看浏览器控制台中的值。 如果有些事情不适合您，请尝试向内迈出一步。