小贝子编程

香草JS选择器有助于从一组单选按钮中添加值



我正在尝试获取一个按钮来运行一个将添加组单选按钮值的函数，但是我认为我在如何编写选择器方面已经解开了。这就是我所拥有的，它至少做了"某事"，即使那件事是"未定义的">

我需要在纯JavaScript中这样做(我还不知道如何处理库或jQuery(

我可能在代码片段中发布了无关的代码，但我试图包含我认为相关的内容(老实说，CSS 可能太多了(

我可以用一些指示来做，我已经盯着这个太久了，以至于我不确定我在读什么了。

我想我还需要将字符串解析为一个数字才能完全完成此操作，但我正在努力获取此信息(我是自学的，所以我确定我可能在某处误读了一些东西(

我一直在阅读其他答案，这就是我如何思考我需要如何构建函数而不是如何问它。

就像我知道如何烤蛋糕，但我不懂鸡蛋！

帮助笨蛋找到她的蛋！

(function() {
function testAttributes() {
document.getElementById('testAttributesOutput').innerHTML = 'check' + physicalattribute;
//get the value of the selected radio in group strength
var str = document.querySelectorAll('input[name^="strength"]:checked').value;
//get the value of the selected radio in group dexterity
var dex = document.querySelectorAll('input[name^="dexterity"]:checked').value;
//get the value of the selected radio in group stamina
var sta = document.querySelectorAll('input[name^="stamina"]:checked').value;
//add the 3 values together
var physicalattribute = str + dex + sta;
//return value as a number not a string
console.log(physicalattribute);
//it prints a string where it expects a number - console prints NaN
}
// Validate attributes setup should display a a number between 0 and 12
document.getElementById('testAttributes').onclick = testAttributes;
})();

html {
font-family: sans-serif;
}
body {
background-color: #ffffff;
}
h1, h2, h3, p {
text-align: center;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
li input {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
li select {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
input[type="radio"] {
display: inline-block;
width: auto;
}
input[type="checkbox"] {
display: inline-block;
width: auto;
}
select {
display: inline-block;
}
.attributes-wrapper, .abilities-wrapper, .description {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.advantages-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.statsBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.attributeName {
align-content: flex-start;
}
.attributeValue {
align-content: right;
}
.attributes, .abilities, .description ul {
width: 31%;
margin: 0;
}
.advantages {
width: 22%;
margin: 0;
}
.inline {
display: inline-block;
}
.inline select {
width: 147%;
}
<body>
<div>
<div>
<button id="testAttributes">Test Attributes</button>
</div>
<div>
Are Attributes valid?:
<span id="testAttributesOutput"></span>
</div>
</div>
<div>
<h2>ATTRIBUTES</h2>
<div class="attributes-wrapper">
<div class="attributes">
<!-- Physical -->
<h3>PHYSICAL</h3>
<ul>
<li>
<div class="statsBox container">
<div>
<label for="strengthSpecialisation">Strength:</label>
</div>
<div>
<input type="radio" class="physical strength" name="strength" id="strength_1" value="0" checked>
<input type="radio" class="physical strength" name="strength" id="strength_2" value="1">
<input type="radio" class="physical strength" name="strength" id="strength_3" value="2">
<input type="radio" class="physical strength" name="strength" id="strength_4" value="3">
<input type="radio" class="physical strength" name="strength" id="strength_5" value="4">
</div>
</div>
<input type="text" name="strengthSpecialisation" id="strengthSpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div>
<label for="dexteritySpecialisation">Dexterity:</label>
</div>
<div>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_1" value="0" checked>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_2" value="1">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_3" value="2">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_4" value="3">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_5" value="4">
</div>
</div>
<input type="text" name="dexteritySpecialisation" id="dexteritySpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div class="attributeName" id="attributeName">
<label for="staminaSpecialisation">Stamina:</label>
</div>
<div class="attributeValue" id="attributeValue">
<input type="radio" class="physical stamina" name="stamina" id="stamina_1" value="0" checked>
<input type="radio" class="physical stamina" name="stamina" id="stamina_2" value="1">
<input type="radio" class="physical stamina" name="stamina" id="stamina_3" value="2">
<input type="radio" class="physical stamina" name="stamina" id="stamina_4" value="3">
<input type="radio" class="physical stamina" name="stamina" id="stamina_5" value="4">
</div>
</div>
<input type="text" name="staminaSpecialisation" id="staminaSpecialisation" placeholder="Specialization if applicable">
</li>
</ul>
</div>
</body>

你快到了，只有两件事：

  • 您要选择单个元素，因此请使用querySelector而不是querySelectorAll。NodeList没有value属性，因此访问其value返回undefined。

  • .value总是返回字符串 - 您需要在将它们相加之前将它们转换为数字。

  • 仅当您有意使用或插入 HTML 标记(这可能会有安全性和编码问题(时才使用innerHTML。设置或检索文本值时，请改用textContent。

(function() {
function testAttributes() {
//get the value of the selected radio in group strength
var str = document.querySelector('input[name="strength"]:checked').value;
//get the value of the selected radio in group dexterity
var dex = document.querySelector('input[name="dexterity"]:checked').value;
//get the value of the selected radio in group stamina
var sta = document.querySelector('input[name="stamina"]:checked').value;
//add the 3 values together
var physicalattribute = Number(str) + Number(dex) + Number(sta);
//return value as a number not a string
console.log(physicalattribute);
//it prints a string where it expects a number - console prints NaN
document.getElementById('testAttributesOutput').textContent = 'check ' + physicalattribute;
}
// Validate attributes setup should display a a number between 0 and 12
document.getElementById('testAttributes').onclick = testAttributes;
})();
html {
font-family: sans-serif;
}
body {
background-color: #ffffff;
}
h1,
h2,
h3,
p {
text-align: center;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
li input {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
li select {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
input[type="radio"] {
display: inline-block;
width: auto;
}
input[type="checkbox"] {
display: inline-block;
width: auto;
}
select {
display: inline-block;
}
.attributes-wrapper,
.abilities-wrapper,
.description {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.advantages-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.statsBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.attributeName {
align-content: flex-start;
}
.attributeValue {
align-content: right;
}
.attributes,
.abilities,
.description ul {
width: 31%;
margin: 0;
}
.advantages {
width: 22%;
margin: 0;
}
.inline {
display: inline-block;
}
.inline select {
width: 147%;
}
<body>
<div>
<div>
<button id="testAttributes">Test Attributes</button>
</div>
<div>
Are Attributes valid?:
<span id="testAttributesOutput"></span>
</div>
</div>
<div>
<h2>ATTRIBUTES</h2>
<div class="attributes-wrapper">
<div class="attributes">
<!-- Physical -->
<h3>PHYSICAL</h3>
<ul>
<li>
<div class="statsBox container">
<div>
<label for="strengthSpecialisation">Strength:</label>
</div>
<div>
<input type="radio" class="physical strength" name="strength" id="strength_1" value="0" checked>
<input type="radio" class="physical strength" name="strength" id="strength_2" value="1">
<input type="radio" class="physical strength" name="strength" id="strength_3" value="2">
<input type="radio" class="physical strength" name="strength" id="strength_4" value="3">
<input type="radio" class="physical strength" name="strength" id="strength_5" value="4">
</div>
</div>
<input type="text" name="strengthSpecialisation" id="strengthSpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div>
<label for="dexteritySpecialisation">Dexterity:</label>
</div>
<div>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_1" value="0" checked>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_2" value="1">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_3" value="2">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_4" value="3">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_5" value="4">
</div>
</div>
<input type="text" name="dexteritySpecialisation" id="dexteritySpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div class="attributeName" id="attributeName">
<label for="staminaSpecialisation">Stamina:</label>
</div>
<div class="attributeValue" id="attributeValue">
<input type="radio" class="physical stamina" name="stamina" id="stamina_1" value="0" checked>
<input type="radio" class="physical stamina" name="stamina" id="stamina_2" value="1">
<input type="radio" class="physical stamina" name="stamina" id="stamina_3" value="2">
<input type="radio" class="physical stamina" name="stamina" id="stamina_4" value="3">
<input type="radio" class="physical stamina" name="stamina" id="stamina_5" value="4">
</div>
</div>
<input type="text" name="staminaSpecialisation" id="staminaSpecialisation" placeholder="Specialization if applicable">
</li>
</ul>
</div>
</body>

你快到了 - 你需要用document.querySelector(或document.querySelectorAll(selector)[0]替换document.querySelectorAll.

这样做的原因是document.querySelectorAll返回一个类似数组的HTMLCollection，即使它只找到一个元素。

(function() {
function testAttributes() {
document.getElementById('testAttributesOutput').innerHTML = 'check' + physicalattribute;
//get the value of the selected radio in group strength
var str = document.querySelector('input[name^="strength"]:checked').value;
//get the value of the selected radio in group dexterity
var dex = document.querySelector('input[name^="dexterity"]:checked').value;
//get the value of the selected radio in group stamina
var sta = document.querySelector('input[name^="stamina"]:checked').value;
//add the 3 values together
var physicalattribute = str + dex + sta;
//return value as a number not a string
console.log(physicalattribute);
//it prints a string where it expects a number - console prints NaN
}
// Validate attributes setup should display a a number between 0 and 12
document.getElementById('testAttributes').onclick = testAttributes;
})();
html {
font-family: sans-serif;
}
body {
background-color: #ffffff;
}
h1,
h2,
h3,
p {
text-align: center;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
li input {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
li select {
padding: 0;
margin: 0;
display: block;
width: 100%;
}
input[type="radio"] {
display: inline-block;
width: auto;
}
input[type="checkbox"] {
display: inline-block;
width: auto;
}
select {
display: inline-block;
}
.attributes-wrapper,
.abilities-wrapper,
.description {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.advantages-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.statsBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.attributeName {
align-content: flex-start;
}
.attributeValue {
align-content: right;
}
.attributes,
.abilities,
.description ul {
width: 31%;
margin: 0;
}
.advantages {
width: 22%;
margin: 0;
}
.inline {
display: inline-block;
}
.inline select {
width: 147%;
}
<body>
<div>
<div>
<button id="testAttributes">Test Attributes</button>
</div>
<div>
Are Attributes valid?:
<span id="testAttributesOutput"></span>
</div>
</div>
<div>
<h2>ATTRIBUTES</h2>
<div class="attributes-wrapper">
<div class="attributes">
<!-- Physical -->
<h3>PHYSICAL</h3>
<ul>
<li>
<div class="statsBox container">
<div>
<label for="strengthSpecialisation">Strength:</label>
</div>
<div>
<input type="radio" class="physical strength" name="strength" id="strength_1" value="0" checked>
<input type="radio" class="physical strength" name="strength" id="strength_2" value="1">
<input type="radio" class="physical strength" name="strength" id="strength_3" value="2">
<input type="radio" class="physical strength" name="strength" id="strength_4" value="3">
<input type="radio" class="physical strength" name="strength" id="strength_5" value="4">
</div>
</div>
<input type="text" name="strengthSpecialisation" id="strengthSpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div>
<label for="dexteritySpecialisation">Dexterity:</label>
</div>
<div>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_1" value="0" checked>
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_2" value="1">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_3" value="2">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_4" value="3">
<input type="radio" class="physical dexterity" name="dexterity" id="dexterity_5" value="4">
</div>
</div>
<input type="text" name="dexteritySpecialisation" id="dexteritySpecialisation" placeholder="Specialization if applicable">
</li>
<li>
<div class="statsBox">
<div class="attributeName" id="attributeName">
<label for="staminaSpecialisation">Stamina:</label>
</div>
<div class="attributeValue" id="attributeValue">
<input type="radio" class="physical stamina" name="stamina" id="stamina_1" value="0" checked>
<input type="radio" class="physical stamina" name="stamina" id="stamina_2" value="1">
<input type="radio" class="physical stamina" name="stamina" id="stamina_3" value="2">
<input type="radio" class="physical stamina" name="stamina" id="stamina_4" value="3">
<input type="radio" class="physical stamina" name="stamina" id="stamina_5" value="4">
</div>
</div>
<input type="text" name="staminaSpecialisation" id="staminaSpecialisation" placeholder="Specialization if applicable">
</li>
</ul>
</div>
</body>

你非常接近 - 这应该可以解决问题： https://jsfiddle.net/rkrzaynf/

基本上，您只需要找到"选中"值并将它们相互添加即可。parseInt()将从字符串转换为整数，以便数学工作。

此外，您有一个 nodeList 数组，它与常规数组略有不同。 使用它来循环：https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/

var testAttributes = function() {
var counter = 0;
var attributes = document.querySelectorAll('input[type="radio"]:checked');
//return value as a number not a string
forEach(attributes, function(index, element) {
counter += parseInt(element.value);
});
//it prints a string where it expects a number - console prints NaN
document.querySelector('#testAttributesOutput').innerHTML = counter;
}
// forEach method, could be shipped as part of an Object Literal/Module
var forEach = function(array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// Validate attributes setup should display a a number between 0 and 12
document.getElementById('testAttributes').addEventListener("click", testAttributes);

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium