0

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

Javascript（外部文件）：

评分.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;

}

年龄.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 会给我未定义的值。似乎第二种形式的值正在覆盖第一种形式的值。如何防止发生这种覆盖。

谢谢你的帮助。

4

1 回答 1

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 函数所做的。你把它改成了别的东西。

于 2013-09-08T03:35:32.057 回答