如何将类型为 "radio" 的输入推送到Firebase数据库？

Question

我使用循环通过 'name' 属性遍历了单选按钮，以获取被选中的 'term' 的值，然后使用一个按钮结合其他值将数据添加到数据库。

const inputTerm = document.getElementsByName("terms")

propertyBtn.addEventListener("click", function () {

    for (let i = 0; i < inputTerm.length; i++){
        if(inputTerm[i].checked){
            let pickedTerm = inputTerm[i].value
        }
    }

    
    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
    };

    push(addedPropertyInDB, propertyData);
    
});

这段代码中，pickedTerm 在函数作用域之外没有定义。我的目标是将完整的 propertyData 对象作为一个整体推送到Firebase数据库。

laalto · Answer

你需要在循环外部声明pickedTerm变量。

const inputTerm = document.getElementsByName("terms");
let pickedTerm; // 在循环外部声明pickedTerm

propertyBtn.addEventListener("click", function () {
    for (let i = 0; i < inputTerm.length; i++){
        if (inputTerm[i].checked) {
            pickedTerm = inputTerm[i].value;
            break; // 找到选中的项后跳出循环
        }
    }

    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
    };
    push(addedPropertyInDB, propertyData); // 将包含pickedTerm在内的propertyData对象推送到数据库
});

IRTFM · Answer

这是因为变量pickedTerm的作用域仅限于if语句内部。

JavaScript中的作用域

作用域是在执行过程中变量和表达式“可见”或可被引用的当前上下文。如果一个变量或表达式不在当前作用域内，则无法使用它。

JavaScript具有以下几种作用域：

全局作用域：脚本模式下运行的所有代码的默认作用域。
模块作用域：模块模式下运行的代码的作用域。
函数作用域：由函数创建的作用域。

关于作用域的更多信息，请参阅MDN文档：https://developer.mozilla.org/en-US/docs/Glossary/Scope" rel="nofollow noreferrer">Scope

对于您当前的脚本，你需要在访问pickedTerm变量的地方声明它。

所以解决方案如下所示，在事件监听器函数内部声明并初始化pickedTerm变量：

const inputTerm = document.getElementsByName("terms")

propertyBtn.addEventListener("click", function () {
    let pickedTerm = null; // 在此处声明并初始化pickedTerm变量
    for (let  i = 0; i < inputTerm.length; i++){
        if(inputTerm[i].checked){
            pickedTerm = inputTerm[i].value;
        }
    }
    
    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
    };

    push(addedPropertyInDB, propertyData);
});

mgilson · Answer

经过几次尝试和调整后。

我创建了一个独立的函数用于循环操作，现在它按我希望的方式工作了。

const inputTerm = document.getElementsByName("terms");

function getSelectedValue(inputs) {
    for (let i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }
    return null;
}

propertyBtn.addEventListener("click", function () {

    const pickedTerm = getSelectedValue(inputTerm);

    
    let propertyData = {
        terms: pickedTerm,
        title: inputTitle.value,
        location: inputLocation.value,
    };

    push(addedPropertyInDB, propertyData);
    console.log(propertyData);

});