Javascript 变量不可用于子函数，涉及事件

我有一个简单的选择框。当用户选择一个选项时，应显示一个包含一些代码的图像和文本框：

 <select name="state" id="state" style="margin-bottom: 1em;">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <!-- etc. etc. -->
 </select>
 
 <div id="badgeView"></div>
 
 <div id="codewrap" >
      <textarea id="codeView" readonly="readonly"></textarea>
 </div>

阿拉巴马州
阿拉斯加州
亚利桑那州

以下是脚本：

/* Helpful variables */ 
var codeTemplate = '<a href="http://www.nonprofitvote.org/voting-in-yourstate.html" title="Voting in Your State">\n' + '<img src="http://nonprofitvote.org/images/badges/voting_in_yourstate.jpg" alt="Voting in Your State" />\n' + '</a>';
var state = document.getElementById('state');
var badgeView = document.getElementById('badgeView');
var codeView = document.getElementById('codeView');

/* Load up AL's image and code when the page first loads */
changeBadgeAndCode();

/* What to do when the user selects an option */
state.addEventListener('change', changeBadgeAndCode, false);

/* What to do if a user clicks in the code view text box */
codeView.addEventListener('click', selectText, false);

/* Function declarations */
function changeBadgeAndCode(){
    changeBadgeView(badgeView);
    changeCodeView(codeView);

    var stateName = state.options[state.selectedIndex].value.toLowerCase();

    function changeBadgeView(element) {
        element.innerHTML = '<img src="http://www.nonprofitvote.org/images/badges/voting_in_' + stateName + '.jpg" />';
    }

    function changeCodeView(element) {
        codeTemplate = codeTemplate.replace(/yourstate/g, stateName);
        codeTemplate = codeTemplate.replace(/Your State/g, stateName);
        element.innerHTML = codeTemplate;
    }
}
function selectText(){this.select()}

/*有用的变量*/
var codeTemplate=''；
var state=document.getElementById（'state'）；
var badgeView=document.getElementById（'badgeView'）；
var codeView=document.getElementById（'codeView'）；
/*在第一次加载页面时加载AL的图像和代码*/
changeBadgeAndCode（）；
/*当用户选择一个选项时该怎么办*/
state.addEventListener（'change'，changeBadgeAndCode，false）；
/*如果用户单击“代码视图”文本框，该怎么办*/
codeView.addEventListener（'click'，selectText，false）；
/*函数声明*/
函数changeBadgeAndCode（）{
更改badgeView（badgeView）；
changeCodeView（代码视图）；
var stateName=state.options[state.selectedIndex].value.toLowerCase（）；
功能更改视图（元素）{
element.innerHTML=''；
}
函数changeCodeView（元素）{
codeTemplate=codeTemplate.replace（/yourstate/g，stateName）；
codeTemplate=codeTemplate.replace（/Your State/g，stateName）；
element.innerHTML=codeTemplate；
}
}
函数selectText（）{this.select（）}

---

如果我发出警报

stateName

，我会得到一个反映我的选项选择的值。但是

stateName

变量似乎不适用于

changebackeview

和

changeCodeView

函数。我不明白为什么。有什么想法吗？

您正在调用

changebackeview

和

changeCodeView

，然后才为

stateName

赋值

你需要先做作业

function changeBadgeAndCode(){
    var stateName = state.options[state.selectedIndex].value.toLowerCase();

    changeBadgeView(badgeView);
    changeCodeView(codeView);

    function changeBadgeView(element) {
        element.innerHTML = '<img src="http://www.nonprofitvote.org/images/badges/voting_in_' + stateName + '.jpg" />';
    }

    function changeCodeView(element) {
        codeTemplate = codeTemplate.replace(/yourstate/g, stateName);
        codeTemplate = codeTemplate.replace(/Your State/g, stateName);
        element.innerHTML = codeTemplate;
    }
}

函数更改BadgeAndCode（）{
var stateName=state.options[state.selectedIndex].value.toLowerCase（）；
更改badgeView（badgeView）；
changeCodeView（代码视图）；
功能更改视图（元素）{
element.innerHTML=''；
}
函数changeCodeView（元素）{
codeTemplate=codeTemplate.replace（/yourstate/g，stateName）；
codeTemplate=codeTemplate.replace（/Your State/g，stateName）；
element.innerHTML=codeTemplate；
}
}

您正在调用

changeBadgeView

和

changeCodeView

，然后才为

stateName

赋值

你需要先做作业

function changeBadgeAndCode(){
    var stateName = state.options[state.selectedIndex].value.toLowerCase();

    changeBadgeView(badgeView);
    changeCodeView(codeView);

    function changeBadgeView(element) {
        element.innerHTML = '<img src="http://www.nonprofitvote.org/images/badges/voting_in_' + stateName + '.jpg" />';
    }

    function changeCodeView(element) {
        codeTemplate = codeTemplate.replace(/yourstate/g, stateName);
        codeTemplate = codeTemplate.replace(/Your State/g, stateName);
        element.innerHTML = codeTemplate;
    }
}

函数更改BadgeAndCode（）{
var stateName=state.options[state.selectedIndex].value.toLowerCase（）；
更改badgeView（badgeView）；
changeCodeView（代码视图）；
功能更改视图（元素）{
element.innerHTML=''；
}
函数changeCodeView（元素）{
codeTemplate=codeTemplate.replace（/yourstate/g，stateName）；
codeTemplate=codeTemplate.replace（/Your State/g，stateName）；
element.innerHTML=codeTemplate；
}
}

谢谢，@我不是！这很有道理。不，我很快就和你谈过了。我原以为你的解决办法会奏效，“我不是，但我遇到了另一个问题。”。changeBadgeView完美地执行更改，但changeCodeView拒绝更改其原始值。即使图像更改为az或其他格式，它仍然顽固地设置为“al”。@JulianJohannesen:首先，您将DOM视为一个HTML字符串。事实并非如此。为了更新DOM，您应该学习选择元素并修改它们的属性。其次，您正在覆盖原始的

codemplate

变量，因此字符串的

yourstate

和

yourstate

部分在第一次运行

changebackandcode（）后不再存在。你太棒了。我会研究你的第一点，但与此同时，你的第二点救了我的命。谢谢，谢谢，我不是！这很有道理。不，我很快就和你谈过了。我原以为你的解决办法会奏效，“我不是，但我遇到了另一个问题。”。changeBadgeView完美地执行更改，但changeCodeView拒绝更改其原始值。即使图像更改为az或其他格式，它仍然顽固地设置为“al”。@JulianJohannesen:首先，您将DOM视为一个HTML字符串。事实并非如此。为了更新DOM，您应该学习选择元素并修改它们的属性。其次，您正在覆盖原始的
codemplate
变量，因此字符串的
yourstate
和
yourstate
部分在第一次运行
changebackandcode（）后不再存在。你太棒了。我会研究你的第一点，但与此同时，你的第二点救了我的命。谢谢