Question

我正在创建限制电视内容限制的Chrome扩展程序。我有两个下拉菜单表单，用于将值存储到本地存储。

Javascript（外部文件）：

ratings.js

window.onload=function (){
    document.getElementById('saveRatings').onsubmit=saveRatings;
}

function saveRatings() {
    var selectedRatings = document.forms["ratings_form"]["ratings"].value;

// store selectedRatings to local storage
    localStorage.storedRatings = selectedRatings;

}

age.js

window.onload=function (){
    document.getElementById('saveAge').onsubmit=saveAge;
}

function saveAge() {
    var selectedAge = document.forms["age_form"]["age"].value;

// store selectedAge to local storage
    localStorage.storedAge = selectedAge;

}

HTML

                    <summary>Select Content to Allow</summary><br>
                        <form name = "ratings_form" id="saveRatings">
                        <select name="ratings" multiple="multiple">
                            <option value="G">G only</option>
                            <option value="G/PG">G/PG only</option>
                            <option value="G/PG/PG13">G/PG/PG-13 only</option>
                            <option value="G/PG/PG13/R">G/PG/PG-13/R</option>
                        </select>
                        <div></div>
                        <input type="submit" value="Save">  </form>

                        <summary>Select Age Group to Deter</summary><br>
                        <form name = "age_form" id="saveAge">
                        <select name="age" multiple="multiple">
                            <option value="e">Everyone</option>
                            <option value="ct">Children & Teens;</option>
                            <option value="c">Children</option>
                            <option value="0">Turn off</option>
                        </select>
                        <div></div>
                        <input type="submit" value="Save">
                        </form>

age_form的键值对正确存储。但是，ratings_form总是给我未定义。如果我切换订单（年龄最初和评级接下来），那么ratings_form的键值对将给出正确的值，而age_value会给我未定义。看起来第二个表单值会覆盖第一个表单值。如何防止这种覆盖发生。

感谢您的帮助。

Answer 1

当然，你的问题是你用最后运行的代码覆盖了window.onload函数！您需要的只是每个函数中的一个简单console.log();，以查看第一个函数未被调用。您可以使用addEventListener()或使用jQuery的$(document).ready()来解决此问题。

window.addEventListener('load', function() {
  console.log('1');
});

window.addEventListener('load', function() {
  console.log('2');
});

请记住onload是window的属性，就像任何变量/属性一样。考虑一下：

var foo = 'bar';
foo = 'baz';
console.log(foo); // displays 'baz', of course! You changed the value!

这正是你对onload函数所做的。你把它改成别的东西。

本地存储多个字段，其中一个字段覆盖第二个字段

1 个答案: