我需要设置一个HTML Web表单输入值专门与JavaScript

vwkv1x7d 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(129)

我有一个网络表单，当用户输入一个重量时，它会接受输入，我需要根据重量显示犬舍的大小，现在它只显示“迷你”，因为页面刷新但从未改变。
我想我需要另一个事件处理程序，每次输入一个重量，但我不太确定如何做到这一点…
这是我用JavaScript写的：

window.addEventListener("load", getKennelSize);
var petForm = document.getElementsByTagName("form");
var petSize;
function getKennelSize() {
    var petWeight = document.getElementById("weight").value;
    if (petWeight === NaN) {
        petSize = " ";
    } else if (petWeight <= 4) {
        petSize = "mini";
    } else if (petWeight >= 4 && petWeight <= 12) {
        petSize = "small";
    } else if (petWeight > 12 && petWeight <= 50) {
        petSize = "medium";
    } else {
        petWeight > 50;
        petSize = "large";
    }
    document.getElementById("size").value = petSize;
}
document.getElementById("size").value = petSize;

我试图在HTML Web表单中定位的元素是：

<p>
    <label for="weight">Weight of pet?</label>
    <input type="text" name="weight" id="weight" class="quantity" />
    <label for="size">Kennel size</label>
    <input type="text" name="size" id="size" class="cost" readonly>
</p>

JavaScript

来源：https://stackoverflow.com/questions/76169154/i-need-to-set-an-html-web-form-input-value-exclusively-with-javascript

2条答案

按热度按时间

xsuvu9jc1#

留言

您可能要查找的是权重输入上的更改或输入事件。另外，我会改变你的重量输入的一个类型的数字，而不是字符串。

超文本标记语言

<p>
    <label for="weight">Weight of pet?</label>
    <input type="number" name="weight" id="weight" step="1" min="0" class="quantity" />
    <label for="size">Kennel size</label>
    <input type="text" name="size" id="size" class="cost" readonly>
</p>

// Define Variables
const weightElem = document.getElementById("weight");
const sizeElem = document.getElementById("size");
const petForm = document.getElementsByTagName("form");

// Handler
function getKennelSize() {
    const weight = parseFloat( weightElem.value );
    if ( isNaN( weight ) ) sizeElem.value = '';
    else if ( weight <= 4 ) sizeElem.value = 'mini';
    else if ( weight <= 12 ) sizeElem.value = 'small';
    else if ( weight <= 50 ) sizeElem.value = 'medium';
    else sizeElem.value = 'large';
}

// Run handler on window load
window.addEventListener( "load", getKennelSize );

// Run handler on weight change
weightElem.addEventListener( "input", getKennelSize );

赞(0）回复(0）举报 2023-05-05

3phpmpom2#

加载事件仅在加载整个页时激发一次。[ "load" event doc ]

window.addEventListener("load", getKennelSize)

要在每次权重更改时运行getKennelSize函数，请替换

window.addEventListener("load", getKennelSize)

与

document.getElementById("weight").addEventListener("change", getKennelSize)

另外，似乎getKennelSize是一个以html形式计算和更新size值的函数，因此将函数命名为updateKennelSize是一个很好的做法。

赞(0）回复(0）举报 2023-05-05

我来回答

我需要设置一个HTML Web表单输入值专门与JavaScript

2条答案

相关问题

热门标签

最新问答