我需要专门用 javascript 设置一个 HTML web 表单输入值

Question

我有一个网络表单，当用户输入体重时接受输入，我需要根据体重显示犬舍大小，现在它只在页面刷新时显示“迷你”，但不会改变。

我想每次输入重量时我都需要另一个事件处理程序，但我不太确定该怎么做..

这是我用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 网络表单中定位的元素是：

<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>

Answer 1

评论

您可能正在寻找的是权重输入的更改或输入事件。另外，我会将您的体重输入更改为一种数字类型而不是字符串。

HTML

<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>

JS

// 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 );

Answer 2

加载事件仅在整个页面加载完成后触发一次。 [“加载”事件文档]

window.addEventListener("load", getKennelSize)

要在每次重量变化时运行 getKennelSize 函数，替换

window.addEventListener("load", getKennelSize)

与

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

另外，

getKennelSize

似乎是一个计算和更新 html 形式的

size

值的函数，因此将函数命名为

updateKennelSize

是一个很好的做法。