无法读取属性“值”
Cannot read property 'Value'
我只是花了大部分时间试图解决这个问题。一点背景:我正在设计一个多步表单,其中一个步骤是在两个选项之间进行选择(两者都是单选按钮)。
例如,第一步是选择性别"男性"或"女性",第二步是在文本输入中输入一些内容。我遇到的问题是,当我选择性别时,它不会进入第二步。我还有一个问题,它确实进入了第二步,但返回的值是"未识别的"。
$('#gpadding input:radio').addClass('input_hide');
$('label').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
var gender, fname, lname;
function _(x) {
return document.getElementById(x);
}
function next1() {
gender = _("gender").value;
_("step1").style.display = "none";
_("step2").style.display = "block";
}
function next2() {
fname = _("firstname").value;
lname = _("lastname").value;
_("step2").style.display = "none";
_("show_all_data").style.display = "block";
_("display_gender").innerHTML = gender;
_("display_fname").innerHTML = fname;
_("display_lname").innerHTML = lname;
}
<div class="step" id="step1">
<h3>Gender</h3>
<div>
<div class="gender-box">
<div id="gpadding">
<input type="radio" name="gender" id="gender" value="m" />
<label for="malereg"><img src="images/icons/male-register.png" /><span>MALE</span></label>
<input type="radio" name="gender" id="gender" value="f" />
<label for="femalereg"><img src="images/icons/female-register.png" /><span>FEMALE</span></label>
</div>
</div>
<button onclick="next1()">Next</button>
<button id="bstep" class="md-close">Close</button>
<div class="clearfix"></div>
</div>
</div>
<div class="step" id="step2">
<h3>Name</h3>
<div>
<input type="text" id="firstname" name="firstname" />
<input type="text" id="lastname" name="lastname" />
<button onclick="next2()">Next</button>
<button id="bstep" class="md-close">Close</button>
<div class="clearfix"></div>
</div>
</div>
<div class="step" id="show_all_data">
<h3>Complete</h3>
<span id="display_gender"></span> <br />
<span id="display_fname"></span> <br />
<span id="display_lname"></span> <br />
<button onlick="submitForm()">Register</button>
<button id="bstep" class="md-close">Close</button>
</div>
- 不能在
<label>
内使用<div>
。 - 确保 ID您定位的选择器它们确实存在。
- 您可以将所有需要的内容包装在标签中,而无需使用
for
和id
属性:
function _(x) { return document.getElementById(x); }
function _n(x) { return document.getElementsByName(x); } //Needed to get elements by Name
var gender, input;
function next1() {
var radio = _n("gender"); // get the elements by Name !!
for (var i=0, j=radio.length; i<j; i++) { // Loop all radio buttons
if (radio[i].checked) { // If one is Checked...
gender = radio[i].value; // All fine
_("step1").style.display = "none";
_("step2").style.display = "block";
break; // and exit the loop.
}
}
if(!gender) return alert("Please select a gender"); // If no value, alert something
}
function next2() {
input = _("input").value; // Use the right ID !!!!!
if(!input) return alert("Please enter your name");
_("step2").style.display = "none";
_("show_data").style.display = "block";
_("display_gender").innerHTML = gender;
_("display_input").innerHTML = input;
}
label{display:block;}
#step1, #step2m #show_data{
background:#eee;
width:200px;
padding:30px;
}
#step2, #show_data{display:none;}
<div id="step1">
<label>
<input type="radio" name="gender" value="m">
<img src="images/icon/male.png" />
<span>MALE</span>
</label>
<label>
<input type="radio" name="gender" value="f">
<img src="img/icon/female.png">
<span>FEMALE</span>
</label>
<button onclick="next1()">Next</button>
</div>
<div id="step2">
<label>
Enter your name:
<input type="text" id="input" name="input">
</label>
<button onclick="next2()">Next</button>
</div>
<div id="show_data">
<p id="display_gender"></p>
<p id="display_input"></p>
</div>
也许将您的代码更改为:
function next1() {
var gender_controls = document.getElementsByName("gender");
gender = gender_controls[0].checked ? gender_controls[0].value : gender_controls[1].value;
_("step1").style.display = "none";
_("step2").style.display = "block";
}
相关文章:
- TypeError:无法读取属性'推'未定义的JavaScript
- 同样,同样的错误'ahorcado.js:26未捕获类型错误:无法读取属性'beginPath'
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 未捕获的类型错误:无法读取属性'删除'的未定义
- AngularJS指令出错-无法读取属性'编译'的未定义
- 未捕获的类型错误:无法读取属性'name'即使它存在,也无法定义
- 看到“;未捕获的类型错误:无法读取属性'weight'未定义的“;尽管按照字面上的指示
- angularjs无法读取未定义的属性then
- 无法读取属性'材料'未定义的Three.js
- 得到"TypeError:无法读取属性'filename'未定义的“;调用“npm start
- Soundcloud api"未捕获的类型错误:无法读取属性'uri'“未定义”;
- 未捕获的类型错误:无法读取属性'addEventListener'的null chrome扩展名
- Soundcloud Javascript SDK 3.0-回调无法读取属性'connectCallback
- 未捕获的类型错误:无法读取属性'状态'在react中为null
- JavaScript承诺-无法读取属性'那么'的未定义
- Javascript Float32数组抛出无法读取属性'0'即使数组定义良好,也为null
- 未捕获的类型错误:无法读取属性'中止'的未定义
- 角度推入数组给出:TypeError:无法读取属性'推'的未定义
- http/rxjs catch回调中的Angular 2重定向导致TypeError:无法读取属性'订阅'
- 角度输入模型有条件地从一个属性读取,写入另一个属性