我有以下代码:
逻辑:
var describe = document.getElementById('describe');
var brandpower = document.getElementById('brandpower');
var describeV = describe.options[describe.selectedIndex].value || describe.value;
var brandpowerV = brandpower.options[brandpower.selectedIndex].value || describe.value;
function pollRadio() {
var handle = window.setInterval(function() {
if (jQuery('input[name="dealer"]:checked').val() == 'Non-Pro') {
jQuery('#domain').value = "null";
jQuery('#website-container').addClass('important-hide')
//window.clearInterval(handle);
} else if (jQuery('input[name="dealer"]:checked').val() == 'Pro') {
jQuery('#website-container').removeClass('important-hide')
jQuery('#domain').value = "";
jQuery('#describe').replaceWith('<select id="describe" class="describeClass custom-select" required ><option value="" selected>Tell us about your business.</option><option value="Just getting started">Just getting started</option><option value="Expanding Quickly">Expanding Quickly</option><option value="Need new cutsomers">Need new cutomers</option><option value="I need better products & solutions">I need better products & solutions</option><option value="Other">Other</option></select>');
window.clearInterval(handle);
}
}, 100);
}
pollRadio();
$(document).on('change', "#describe", function() {
if (jQuery('.describeClass').val() == 'Other') {
jQuery('.describeClass').replaceWith('<input id="describe" class="describeClass form-text" placeholder="Tell us about Other" type="text" style="height:52px; width:100%;" required> ')
}
});
$('#brandpower').on('change', function(){
if (jQuery('#brandpower').val() == 'Other') {
jQuery('#brandpower').replaceWith('<input id="brandpower" placeholder="Tell us about Other" type="text" class="form-text" style="height:52px; width:100%;" required> ')
}
});
标记:
<div class="padded-container">
<div class="form-container-padded">
<select id="describe" class="custom-select describeClass" required >
<option value="" selected>Which best describes you?</option>
<option value="Household CEO">Household CEO</option>
<option value="Geek Dad">Geek Dad</option>
<option value="Geek Mom">Geek Mom</option>
<option value="Home Automation Thought Leader">Home Automation Thought Leader</option>
<option value="New Home Automation Business Owner">New Home Automation Business Leader</option>
<option value="Z-Wave Evangelist">Z-Wave Evangelist</option>
<option value="Integrator">Integrator</option>
<option value="IoT Expert">IoT Expert</option>
<option value="Enviormentalist">Enviormentalist</option>
<option value="Educator">Educator</option>
<option value="Computer Science Graduate">Computer Science Graduate</option>
<option value="CES Atendee">CES Atendee</option>
<option value="Competitor">Competitor</option>
<option value="College Student">College Student</option>
<option value="Urban Dweller">Urban Dweller</option>
<option value="Minimalist">Minimalist</option>
<option value="Home Builder">Home Builder</option>
<option value="New Home Owner">New Home Owner</option>
<option value="Electrician">Electrician</option>
<option value="Plumber">Plumber</option>
<option value="Other type of Tradesmen/Tradeswoman">Other type of Tradesmen/Tradeswoman</option>
<option value="General Contractor">General Contractor</option>
<option value="Generalist">Generalist</option>
<option value="Summer Home Owner">Owner</option>
<option value="Serial Entreprenour">Serial Entreprenour</option>
<option value="Tech Savvy">Tech Savvy</option>
<option value="Tinkerer">Tinkerer</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="padded-container">
<div class="form-container-padded">
<select id="brandpower" class="custom-select" required>
<option value="" selected>How well do you know dome?</option>
<option value="I don't. This is my first time hearing about Dome.'">I don't. This is my first time hearing about Dome.</option>
<option value="Have heard of somewhere, but not sure where.">Have heard of somewhere, but not sure where.</option>
<option value="I discovered Dome while researching on the internet.">I discovered Dome while researching on the internet.</option>
<option value="I clicked on an ad for Dome I saw online">I clicked on an ad for Dome I saw online</option>
<option value="Someone told about Dome">Someone told about Dome</option>
<option value="We met at a tradeshow">We met at a tradeshow</option>
<option value="I'm alreaedy interested in working with Dome">I'm alreaedy interested in working with Dome</option>
<option value="I have Dome installed in my home">I have Dome installed in my home</option>
<option value="I've been to Dome's websites several times">I've been to Dome's websites several times</option>
<option value="Other">Other</option>
</select>
</div>
</div>
所以,这个想法是,在第2 - 4行,如果一个元素不存在,解释器会选择一个因此||
运算符的值。
使用replaceWith方法的jQuery在满足certian条件时动态更改DOM元素。我的一部分感觉好像这个,加上getDocumentById是问题的一部分,因为ID只能存在一次。它看起来在控制台中存在正确。
然而,虽然我认为这应该在理论上有效,但是在[element.selectedIndex].value
部分,因为它未定义,因此会抛出错误。我怎样才能克服这个错误并让我的表单以我希望的方式工作?
答案 0 :(得分:0)
解释器将尝试评估||
之前的所有内容,因此如果满足以下任何条件,它将会爆炸:
describe
未定义(带有该ID的DOM中没有元素),因此您无法访问describe.options
describe.options
未定义,这意味着您无法在其上引用[describe.selectedIndex]
属性describe.selectedIndex
未定义,这意味着describe.options[describe.selectedIndex]
将返回undefined
,然后您无法访问其上的value
媒体资源你需要更加防守,也许是这样的:
var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;