gpt4 book ai didi

javascript - 如何将函数的结果放入 html 表单元素中

转载 作者:行者123 更新时间:2023-12-03 00:20:27 25 4
gpt4 key购买 nike

我试图将函数的结果放入 html 表单字段中,以便可以通过 Post 方法传递。该函数运行良好,但是,我似乎无法将值传递到下一页。如何将函数中的值获取到 <span name=total-price-view> 中这样我就可以在文件重定向后检索它?我看了又看。

更新:我更改了 <span>到隐藏的输入字段。不工作。所以我用一个 LABEL 包裹起来,该函数就可以工作了。但是,我仍然无法获得该值。我做错了什么?

最终更新:我按照 Barmar 的说法进行了如下更改,并且运行良好。查看选中的答案为最佳答案。

HTML:

<dl>
<dt>
<div label id="mustcheck"><label for="cat1">1</label>
<input type="checkbox" name="cat1" id="cat1" class="categories" value="checkbox" onclick="get1()" />
</dt>

<dt>
<label for="cat2">2</label>
<input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" />
</dt>

<dt>
<label for="cat3">3</label>
<input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" />
</dt>

<dt>
<label for="cat4">4</label>
<input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" />
</dt>

<dt>
<label for="cat5">5</label>
<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" />
</dt>

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick=""/>

脚本:

<script>
var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
for (var i = 0; i < pacs.length; i++) {
console.log('looping');
pacs[i].addEventListener('change', function (e) {
var totalPrice = calculatePrice();
document.getElementById('total-price').innerHTML = totalPrice;
});
}
}

function calculatePrice() {
var pricePerCheckbox = 3.00; // $3.00
var totalChecked = 0;
for (var i = 0; i < pacs.length; i++) {
if (pacs[i].checked) {
totalChecked++;
}
}

var Totals = totalChecked * pricePerCheckbox;
return Totals;
}

attachEventListeners();
</script>

我已经尝试过:

<body onload="calculatePrice()">
Price: <strong>$<input name="total-price-view" id="total-price-view"
value="return calculatePrice()"></strong></span>

我也尝试过:

document.getElementById('total-price-view').value = Totals;

最佳答案

当您分配给 document.getElementById('total-price').innerHTML = totalPrice; 时您正在删除隐藏的输入。您不需要<label>如果它不与可见的输入字段关联。你应该把它设为 <span> ,但是从中取出隐藏的输入。

然后您还需要分配给隐藏输入的值。

您的 HTML 元素嵌套也不正确。你有<strong><label>但以</strong></label>结束而不是</label></strong>

var pacs = document.getElementsByClassName("categories");

function attachEventListeners() {
for (var i = 0; i < pacs.length; i++) {
console.log('looping');
pacs[i].addEventListener('change', function(e) {
var totalPrice = calculatePrice();
document.getElementById('total-price').innerHTML = document.getElementById("total-price-view").value = totalPrice;
});
}
}

function calculatePrice() {
var pricePerCheckbox = 3.00; // $3.00
var totalChecked = 0;
for (var i = 0; i < pacs.length; i++) {
if (pacs[i].checked) {
totalChecked++;
}
}
var Totals = totalChecked * pricePerCheckbox;
return Totals;
}

attachEventListeners();
<dl>
<dt><label for="cat2">2</label><input type="checkbox" name="cat2" id="cat2" class="categories" value="checkbox" onclick="get2()" /></dt>
<dt><label for="cat3">3</label><input type="checkbox" name="cat3" id="cat3" class="categories" value="checkbox" onclick="get3()" /></dt>
<dt><label for="cat4">4</label><input type="checkbox" name="cat4" id="cat4" class="categories" value="checkbox" onclick="get4()" /></dt>
<dt><label for="cat5">5<input type="checkbox" name="cat5" id="cat5" class="categories" value="checkbox" onclick="get5()" /></div></dt>
</dl>

Price: <strong>$<span name="total-price" id="total-price">0</span></strong>
<input type="hidden" name="total-price-view" id="total-price-view" value="">

<input type="submit" value="Subscribe" id="subscribe" name="subscribe" onclick="" />

关于javascript - 如何将函数的结果放入 html 表单元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54335882/

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