我试图基于click事件更新HTML元素的child元素的文本。用户单击范围：
<span id="button_entitypeople" onclick="toggleentitylist(this.id)" class="fake_link">
<span class="en">view list</span>
</span>
.. it显示一个div。为此，我尝试使用.textContent将其从view list重命名为hide list的跨度document.getElementById(respdiv).getElementsByClassName('en').textContent：
function toggleentitylist(clicked_id)
{{
var respdiv
respdiv = clicked_id.replace("button","div");
if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none")
{{document.getElementById(respdiv).style.display = "inline";
document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "hide list";}}
else {{document.getElementById(respdiv).style.display = "none";
document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";}}
}}
虽然div显示和隐藏正确，但是文本没有更新。
注意：由于要介绍几种不同的语言，因此我必须使用getElementsByClassName。
非常感谢。
function toggleentitylist(clicked_id)
{{
var respdiv
respdiv = clicked_id.replace("button","div");
if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none")
{{document.getElementById(respdiv).style.display = "inline";
document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "hide list";}}
else {{document.getElementById(respdiv).style.display = "none";
document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";}}
}}#div_entitypeople{
display: none;
}
#div_entityplaces{
display: none;
}<span id="button_entitypeople" onclick="toggleentitylist(this.id)" class="fake_link"><span class="en">view list</span></span>
<div id="div_entitypeople">
<ul>
<li id="Arnald_de_Pencha_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Arnald de Pencha</li>
<li id="Arnald_Roger_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Arnald Roger</li>
<li id="Ava_Sanci_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Ava Sanci</li>
<li id="B_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">B de Rochafort</li>
<li id="Bernard_Chap_Ladinhac" class="highlight-entities" onclick="highlightEntities(this)">Bernard, magister, chaplain of Ladinhac</li>
<li id="Bernard_de_Caux_OP" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Caux, OP</li>
<li id="Bernard_de_Quiders_senior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Quiders senior</li>
<li id="Bernard_de_Saint-Esteve_CAZ-AU" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Saint-Esteve</li>
<li id="Bertrand_de_Quiders_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Bertrand de Quiders</li>
<li id="Bertrand_Marti_H" class="highlight-entities" onclick="highlightEntities(this)">Bertrand Marti</li>
<li id="Braida_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Braida de Mont Server</li>
<li id="Cecilia_Roger_nee_de_Mont_Server_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Cecilia Roger</li>
<li id="Corba_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Corba de Pereille</li>
<li id="Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">Dominic de Catalonia</li>
<li id="Ermengarde_de_Caucer_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Ermengarde de Caucer</li>
<li id="Ermengarde_de_Mazerol_GAJ-AU" class="highlight-entities" onclick="highlightEntities(this)">Ermengarde de Mazerol</li>
<li id="Estolt_de_Rochavila_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Estolt de Rochavila</li>
<li id="Fauressa_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Fauressa del Mas</li>
<li id="Ferrier_OP" class="highlight-entities" onclick="highlightEntities(this)">Ferrier, OP</li>
<li id="Francesca_de_la_Ylha_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Francesca de la Ylha</li>
<li id="Galharda_de_Romengos_RMG-AR" class="highlight-entities" onclick="highlightEntities(this)">Galharda de Romengos</li>
<li id="Galharda_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Galharda del Mas</li>
<li id="Geralda_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Geralda de Rochafort</li>
<li id="Guilabert_de_Castres_H" class="highlight-entities" onclick="highlightEntities(this)">Guilabert de Castres</li>
<li id="Guilhelma_Canast_de_Paracol_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhelma Canast de Paracol</li>
<li id="Guilhelma_Meta_nee_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhelma Meta née del Mas</li>
<li id="Guilhem_Canast-Brus_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem Canast-Brus</li>
<li id="Guilhem_de_la_Ylha_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Guilhem de la Ylha</li>
<li id="Guilhem_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Guilhem de Rochafort</li>
<li id="Guilhem_del_Mas_Junior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem del Mas junior</li>
<li id="Guilhem_del_Mas_Senior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem del Mas senior</li>
<li id="heretics_not_named" class="highlight-entities" onclick="highlightEntities(this)">heretics not named</li>
<li id="heretics_unknown_2f" class="highlight-entities" onclick="highlightEntities(this)">2 unknown female heretics</li>
<li id="heretics_unknown_3f" class="highlight-entities" onclick="highlightEntities(this)">3 unknown female heretics</li>
<li id="heretics_unknown_m" class="highlight-entities" onclick="highlightEntities(this)">unknown male heretics</li>
<li id="Johan_Cambiaire_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Johan Cambiaire</li>
<li id="Maria_de_Quiders_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Maria de Quiders</li>
<li id="Marquesa_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Marquesa de Rochafort</li>
<li id="mother_of_Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">mother of Dominic de Catalonia</li>
<li id="Na_Fornier_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Na Fornier de Pereille</li>
<li id="Na_Laureta_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Na Laureta</li>
<li id="others_unrecalled" class="highlight-entities" onclick="highlightEntities(this)">many others unrecalled</li>
<li id="P_Audoys_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">P Audoys</li>
<li id="P_Bernard_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">P Bernard</li>
<li id="P_de_las_Combas_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">P de las Combas</li>
<li id="P_Raimund_Roi_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">P. Raimund Roi</li>
<li id="Peire_de_Fogars_LAV-AR" class="highlight-entities" onclick="highlightEntities(this)">Peire de Fogars</li>
<li id="Peire_de_Mazerol_GAJ-AU" class="highlight-entities" onclick="highlightEntities(this)">Peire de Mazerol</li>
<li id="Peire_Faure_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Peire Faure</li>
<li id="Peire_Fresapa_NOT" class="highlight-entities" onclick="highlightEntities(this)">Peire Fresapa, notary</li>
<li id="Pelegrina_de_Mont_Server_nee_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Pelegrina de Mont Server née del Mas</li>
<li id="Ponca_de_Vilar_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">Ponca de Vilar</li>
<li id="Raimund_Canast_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Raimund Canast</li>
<li id="Raimund_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Raimund de Pereille</li>
<li id="Raimund_Sanci_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Raimund Sanci</li>
<li id="Raimunda_de_Cuc_CMS-AU" class="highlight-entities" onclick="highlightEntities(this)">Raimunda de Cuc</li>
<li id="Raimunda_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Raimunda de Mont Server</li>
<li id="Ransana_de_Fanjeaux_FJX-AU" class="highlight-entities" onclick="highlightEntities(this)">Ransana de Fanjeaux</li>
<li id="Sylvestre_Chap_Verfeil" class="highlight-entities" onclick="highlightEntities(this)">Sylvestre, chaplain of Verfeil</li>
<li id="W_de_Mirepoix_PAM-AR" class="highlight-entities" onclick="highlightEntities(this)">W de Mirepoix</li>
<li id="Ysarn_de_Fanjeaux_FJX-AU" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Fanjeaux</li>
<li id="Ysarn_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Mont Server</li>
<li id="Ysarn_de_Vilar_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Vilar</li>
</ul>
</div>
<br/>
<span id="button_entityplaces" onclick="toggleentitylist(this.id)" class="fake_link"><span class="en">view list</span></span>
<div id="div_entityplaces">
<ul>
<li id="home_in_Queille" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus in Queillé</span><span class="fr">domus à Queillé</span></name>
</li>
<li id="home_of_Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Dominic de Catalonia</span><span class="fr">domus de Dominic de Catalonia</span></name>
</li>
<li id="home_of_Guilabert_de_Castre" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Guilabert de Castre</span><span class="fr">domus de Guilabert de Castre</span></name>
</li>
<li id="home_of_Guilhem_Canast-Brus" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Guilhem Canast-Brus</span><span class="fr">domus de Guilhem Canast-Brus</span></name>
</li>
<li id="home_of_Guilhem_del_Mas_Sr_MSP" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Guilhem del Mas senior</span><span class="fr">domus de Guilhem del Mas senior</span></name>
</li>
<li id="home_of_Na_Fornier_de_Pereille" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Na Fornier de Pereille</span><span class="fr">domus de Na Fornier de Pereille</span></name>
</li>
<li id="home_of_Na_Laureta" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Na Laureta</span><span class="fr">domus de Na Laureta</span></name>
</li>
<li id="home_of_P_de_las_Combas" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of P. de las Comabas</span><span class="fr">domus de P. de las Comabas</span></name>
</li>
<li id="home_of_Peire_Faure_MSP" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Peire Faure</span><span class="fr">domus de Peire Faure</span></name>
</li>
<li id="home_of_Raimund_Canast_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">
<name><span class="en">domus of Bernard and Raimund Canast</span><span class="fr">domus de Bernard et Raimund Canast</span></name>
</li>
<li id="Lavelanet_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Lavelanet</span></name>
</li>
<li id="Mirepoix_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Mirepoix</span></name>
</li>
<li id="Montsegur_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Montségur</span></name>
</li>
<li id="Pamiers_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Pamiers</span></name>
</li>
<li id="Pereille_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Péreille</span></name>
</li>
<li id="Saissac_Aude" class="highlight-entities" onclick="highlightEntities(this)">
<name><span>Saissac</span></name>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
答案 0 :(得分：1)
为此更容易使用jQuery，先选择元素，然后找到子元素。同样在您的函数中，您尝试使用“ respdiv”变量来查找“ button_entitypeople”类的跨度，但是您已经用div替换了按钮，因此该按钮无效，您必须使用“ clicked_id”查找元素，然后找到带有“ en”类的跨度。
function toggleentitylist(clicked_id)
{
var respdiv
respdiv = clicked_id.replace("button","div");
if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none"){
document.getElementById(respdiv).style.display = "inline";
$("#"+clicked_id).find($("."+'en')).text("Hide list");
}
else {
document.getElementById(respdiv).style.display = "none";
$("#"+clicked_id).find($("."+'en')).text("Show list");
}
}
答案 1 :(得分：-2)
getElementsByClassName()返回节点列表。节点列表没有textContent属性，单个节点却具有。所以这个：
document.getElementById(respdiv).getElementsByClassName('en').textContent == "show list";
不起作用；
您需要从节点列表中分离出一个节点。
您可以通过传递索引来实现：
document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";