gpt4 book ai didi

javascript - Javascript通过ID改变元素的颜色

转载 作者:行者123 更新时间:2023-11-29 10:52:06 25 4
gpt4 key购买 nike

你好,我正在尝试对我正在处理的表单进行验证,我已经编写了一个函数并使用了

document.getElementById("span_trav_emer_med_insur").style.backgroundColor ='#FFFFFF';

我已经测试了显示警告消息框的功能,出于调试目的,选中“trav_emer_med_insur”时会显示消息框。我已经检查过这里和无数其他网站,他们都说 getElementById.style.backgroundColor = 'color'; 是实现我正在寻找的方法。我现在不明白为什么它不起作用,一切看起来都是正确的。

这是我的函数的开始相关部分:

function validatePlanTypes(form)    {
var error = "";

if (form.trav_emer_med_insur.checked) {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';
if (!form.trav_emer_med_insur_opt1.checked || !form.trav_emer_med_insur_opt2.checked || !form.trav_emer_med_insur_opt3.checked || !form.trav_emer_med_insur_opt4.checked) {
form.trav_emer_med_insur_opt1.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt2.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt3.style.backgroundColor = 'Yellow';
form.trav_emer_med_insur_opt4.style.backgroundColor = 'Yellow';
error = "You must pick a plan-type for Travel Emergency Medical insurance, areas with a problem have been highlighted yellow for you.";
}

我还没有测试完整的功能,我现在只是想测试第一个 if 语句,正如我所说的 if 语句有效和 alert("bleh");如果我选中该框,将显示警报

这是我试图更改复选框周围 span 元素背景颜色的表单的 HTML。

<p><span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" value="span_trav_emer_med_insur" style=""><input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if"  value="trav_emer_med_insur_if" class="form_elements" onClick="if(this.checked){document.getElementById('trav_emer_med_options').style.display='block';}else{document.getElementById('trav_emer_med_options').style.display='none';}"/></span> <!-- Travel Emergency Medical If Box -->

<label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if">&nbsp;&nbsp;Travel Emergency Medical Insurance&nbsp;<em>(expands when checked)</em>.</label></p>
<p>

<div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden">

我也试过

form.span_trav_emer_med_insur.style.backgroundColor = '#FFFFFF';

同样无济于事,我真的被难住了,代码看起来和我在网上看到的一模一样。有人请告诉我我缺少什么。

谢谢,-肖恩

编辑 - 只是为了验证:

if (form.trav_emer_med_insur.checked)   {
alert("bleh");

代替

if (form.trav_emer_med_insur.checked)   {
document.getElementById("span_trav_emer_med_insur").style.backgroundColor = '#FFFFFF';

确实有效,所以 if 语句或函数不是问题。

在此处完成文件 - getelementbyID 不起作用 - http://hotfile.com/dl/135598683/93484d4/general2.html

使用 alert('bleh') WORKING 在此处完成文件 - http://hotfile.com/dl/135598746/dc9e14b/general23.html

工作 PHP 代码准确地显示了我正在尝试做的事情(减去页面重新加载部分):

    // Check if Emergency Medical is selected.
if (isset($_POST['trav_emer_med_insur'])) {

// If Emergency Medical is selected, then check to see if an option has been selected
if (isset($_POST['trav_emer_med_insur_opt1']) or isset($_POST['trav_emer_med_insur_opt2']) or isset($_POST['trav_emer_med_insur_opt3']) or isset($_POST['trav_emer_med_insur_opt4'])) {

$SQLString = $SQLString . "emer_med, emer_med_opt1, emer_med_opt2, emer_med_opt3, emer_med_opt4";

}

// If no option is selected display error message
else {

++$ErrCount;
$Errors[$ErrCount] = "You selected interest in Travel Emergency Medical Insurance but did not select a plan-type for it";

}
}

// Check if All-Inclusive Insurance is selected.
elseif (isset($_POST['allinc_insur'])) {

//If All-Inclusive Insurance is selected, then check to see if an option has been selected
if (isset($_POST['allinc_insur_opt1']) or isset($_POST['allinc_insur_opt2'])) {

}

//If no option is selected display error message
else {

++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in All-Inclusive Insurance but did not select a plan-type for it";

}
}

// Check if Cancellation Insurance is selected.
elseif (isset($_POST['cancel_insur'])) {



}

// Check if Visitor Insurance is selected.
elseif (isset($_POST['visitor_insur'])) {

//If Visitor Insurance is selected, then check to see if country is selected.
if (isset($_POST['country_select'])) {

}

// If no country selected display error message
else {

++$ErrCount;
$Errors[$ErrCount] = "You have selected interest in Visitor Insurance but have not selected a country";

}
}

//If no insurane types selected display error.
else {

++$ErrCount;
$Errors[$ErrCount] = "You haven not selected interest in any insurance plan types";

}
while ($Count != $Target) {
if (checked($QuestionNames[0]) != 1);
++$Count;
}

最佳答案

您是否尝试过从一开始就给 span 一种颜色,只是为了确认您可以看到它?

由于您的代码看起来完全没问题,所以您可能只是看不到 span 背景颜色。

就其值(value)而言,我同意 OP 的观点,即使用 jquery 处理像这样的琐碎事情是浪费带宽。

根据您的评论,我创建了一个测试页面来模拟您的评论。

这个有效:

<span name="span_trav_emer_med_insur" id="span_trav_emer_med_insur" style='backgroundcolor:red'>
some words<input type="checkbox" name="trav_emer_med_insur" id="trav_emer_med_insur_if" value="trav_emer_med_insur_if" class="form_elements" onClick="clck(this)"/>
</span>
<label class="form_elements" name="label_for_trav_emer_med_insur_if" id="label_for_trav_emer_med_insur_if">  Travel Emergency Medical Insurance <em>(expands when checked)</em>.</label></p>
<div id="trav_emer_med_options" name="trav_emer_med_options" class="questions_hidden" style='display:none;'>
some hidden words
</div>
<script type="text/javascript">
function clck(cbObj) {
if(cbObj.checked){
document.getElementById("span_trav_emer_med_insur").style.background = "green";
document.getElementById('trav_emer_med_options').style.display='block';
}
else {
document.getElementById("span_trav_emer_med_insur").style.background = "red";
document.getElementById('trav_emer_med_options').style.display='none';
}
}
</script>

关于javascript - Javascript通过ID改变元素的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8206322/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com