（Javascript问题）getElementById无法获取元素，即使我可以在Chrome inspector中看到它

各位,

我正在用Django编写一个Web应用程序。 我的问题实际上是在其中一个模板中，我创建了一个javascript函数来将信息从一个表单复制到另一个表单

我试图从p标签复制两个值，一个正常，另一个不正常

所以，这就是我所拥有的。 这是我的第一个表单，在其中我加载了一个带有联系人姓名和文档ID的表。 此外，在这个表中，每个寄存器的第一列是一个单选按钮，我将onchange事件设置为javascript函数“copyContact”

该表是为在DB中找到的每个联系人动态创建的，为了正确复制所选收音机的值，我还使用我拥有的联系人id信息动态地为每个单元格提供id

因此，基本上联系人id 15的名字信息将具有id=First_Name_15，依此类推

                        <div class="row flex-nowrap border-bottom mx-1">
                            <div class="col-1">
                                <p class=" my-2"><input class="form-check-input shadow-sm contactRadio" type="radio" name="contactRadio" id="contact{{ contact_contact_id }}" onchange="copyContact(this)" value="{{ contact.contact_id }}"></p>
                            </div>
                            <div class="col-3">
                                <p class="text-wrap my-2" id="first_name_{{ contact.contact_id }}">{{ contact.contact_first_name }}</p>
                            </div>
                            <div class="col-4">
                                <p class="text-wrap my-2" id="last_name_{{ contact.contact_id }}">{{ contact.contact_last_name }}</a></p>
                            </div>
                            <!-- div class="col-2">
                                <p class="text-wrap my-2">{{ contact.get_document_type_display }}</p>
                            </div-->
                            <div class="col-4">
                                <p class="text-wrap my-2" id="doc_no_{{ contact.contact_id }}">{{ contact.document_no }}</p>
                            </div>
                        </div>

每次用户选择联系人表单中的新单选按钮时，都会调用我的函数。 我的问题是getElementById似乎不适用于元素id\u文档\u no

当我选择收音机时，所选联系人的名字和姓氏被连接起来并正确发送到id\U customer\u name input，但由于我不知道的原因，id\U document\u no元素不会发生这种情况。 在函数的这一行中： var cust_doc=document.getElementByIdid_document_no；

通过更改函数并将联系人的文档信息发送到id_customer_name（仅用于调试目的）var cust_doc=document.getElementById_customer_name；，我可以看到，我的函数至少在获取文档值。

然后我假设问题出在getElementById上，但我不确定

有人知道这里会发生什么吗？我错丢了哪个身份证？ 因为我很确定这是个愚蠢的错误

---

很抱歉发了这么长的帖子。

我仍然没有发现我的代码有问题，为什么不能正常工作。 无论如何，我找到了一个解决办法，那就是将字段的名称从“document\u no”重构为“document\u number”。这包括模板、django表单和模型，这也意味着更改数据库中的列名

---

我想我永远也不会知道真正的问题。¯_ツ_/“

ife看到此错误的大部分时间都是错误的范围。使用var而不是consor可能会导致这种情况。我建议不要使用基于html id的值，也不要将这些值存储在静态或全局对象中。使用html自定义数据标记，这就是它的用途：自定义数据。我会在复制元素的构建时安装监听器。有了它，你就可以确定每个项目都有它的监听器。实际上，我对HTML和任何与之相关的东西都是新手。我不知道变量的作用域，甚至不知道自定义数据属性。在快速搜索之后，我发现范围对于这个问题并不重要。无论如何，我确实用所有这些类型的变量执行了一些测试，但没有成功。至于自定义数据属性，这是一个很酷的概念，但是它没有解决我的问题，因为这将帮助我存储数据，而不是将其复制到其他元素。此外，我不确定自定义数据如何与Django框架配合使用，因为输入是自动创建的。我会试着查一下。

<!-- CUSTOMER FORM -->
                <h4>Informações do Cliente:</h4>
                <input type="text" hidden="true" name="selected_contact" id="selected_contact">
                <div class="row mb-1">
                    <label class="col-sm-3 col-form-label col-form-label-sm">Cliente:</label>
                    <div class="col-sm-9">
                        {{ customer_form.customer_name }}
                        <!-- input class="form-control form-control-sm shadow-sm" type="text" value="{{ customer.customer_name }}" -->
                    </div>
                </div>

                <div class="row mb-1">
                    <label class="col-sm-3 col-form-label col-form-label-sm">Tipo:</label>
                    <div class="col-sm-9">
                        {{ customer_form.customer_type }}
                        <!-- input class="form-control form-control-sm shadow-sm" type="text" required value="{{ customer.get_customer_type_display }}" -->
                    </div>
                </div>

                <div class="row mb-1">
                    <label class="col-sm-3 col-form-label col-form-label-sm">Documento:</label>
                    <div class="col-sm-9">
                        {{ customer_form.document_type }}
                        <!-- input class="form-control form-control-sm shadow-sm" type="text" value="{{ customer.get_document_type_display }}" -->
                    </div>
                </div>

                <div class="row mb-1">
                    <label class="col-sm-3 col-form-label col-form-label-sm">Número Doc:</label>
                    <div class="col-sm-9">
                        {{ customer_form.document_no }}
                        <!-- input class="form-control form-control-sm shadow-sm" type="text" value="{{ customer.document_no }}" -->
                    </div>
                </div>
                <!-- /CUSTOMER FORM -->
                {% if customer_form.errors %}

                    {% for field in customer_form %}
                        {% for error in field.errors %}
                            <div class="alert alert-danger p-1">
                                {{ field|add:': -'|add:error|escape }}
                            </div>
                        {% endfor %}
                    {% endfor %}

                    {% for error in customer_form.non_field_errors %}
                        <div class="alert alert-danger p-1">
                            {{ error|escape }}
                        </div>
                    {% endfor %}

                {% endif %}
                <!-- /CUSTOMER FORM -->

<script>
    function copyContact(radioItem) {
        var fname = document.getElementById("first_name_" + radioItem.value);
        var lname = document.getElementById("last_name_" + radioItem.value);
        var cname = fname.innerHTML + " " + lname.innerHTML;
        var doc = document.getElementById("doc_no_" + radioItem.value);

        var cust_name = document.getElementById("id_customer_name");
        var cust_doc = document.getElementById("id_document_no");

        cust_name.value = cname;
        cust_doc.value = doc.innerHTML;

        var contact = document.getElementById("selected_contact");
        contact.value = radioItem.value;
    }
</script>