JavaScript addEventListener 调用函数但无法更新全局变量

问题描述 投票：0回答：1

请耐心等待，因为我是新手。

我正在使用 JavaScript 进行编码，并使用 

.addEventListener
上的 
document.getElementById("texts")
来跟踪 HTML 下拉列表中的更改。每当做出选择时，
.addEventListener
都会调用函数
changeTextValue
。这部分正在工作，因为我可以从函数内
console.log
，并且函数内的条件逻辑已正确执行并从函数内发送到控制台。然而，该函数的重点是每次鼠标事件发生时更新函数外部的变量 (
text
)。我已将函数分配给变量，并在函数中包含了带有适当局部变量的 return 语句。所有这些都有效，分配最初是在函数范围之外进行的，并在页面首次加载时打印到控制台。但是，当鼠标事件发生时，变量值永远不会在函数外部更新。而函数内的 
console.log
会在事件发生时更新。

我尝试仅初始化变量

text
而不为其赋值。但后来我收到一个错误，指出 '
text.toLowerCase()
' 未定义。

我尝试将 

text
初始化为空数组。然后将 
text
（代替 
chosenText
）插入到函数中，并在其前面加上 
window
前缀以将其作为全局变量访问。这引发了一个错误：第 57 行，'
text.toLowerCase()
' 不是一个函数。当我将代码返回到发布代码的方式，将 
text
变量保留在函数外部，但将函数分配给该变量时，此错误就会消失。

我觉得我错过了一些基本的东西。感谢您的帮助。

'use strict';

const mobyDickText=`Moby Dick text....`;
const huckFinnText=`Huck Finn text....`;
let dropdown = document.getElementById("texts");
let pick=dropdown.value;
const title=pick;
let chosenText;
let text= changeTextValue();
let letterCount;
let lowercaseText;

document.getElementById("book-title").innerHTML = title;

function changeTextValue() {
    pick = dropdown.value;
    if (pick === "huckFinnText") {
         chosenText = huckFinnText;
        console.log(chosenText);
    } else if (pick === "mobyDickText") {
        chosenText = mobyDickText;
        console.log(chosenText);
    } return chosenText;
}

console.log(text);

document.getElementById("texts").addEventListener("change", changeTextValue);

function countFunction(letter) {
    let letterCount=0;
    lowercaseText=text.toLowerCase();
    for (let i=0; i<=text.length-1; i++) {
      if (letter === lowercaseText.charAt(i)) {
          letterCount++;
      }
    } return letterCount;
  } 

const a = countFunction("a");
const b = countFunction("b");
const c = countFunction("c");
const d = countFunction("d");
const e = countFunction("e");
const f = countFunction("f");
const g = countFunction("g");
const h = countFunction("h");
const i = countFunction("i");
const j = countFunction("j");
const k = countFunction("k");
const l = countFunction("l");
const m = countFunction("m");
const n = countFunction("n");
const o = countFunction("o");
const p = countFunction("p");
const q = countFunction("q");
const r = countFunction("r");
const s = countFunction("s");
const t = countFunction("t");
const u = countFunction("u");
const v = countFunction("v");
const w = countFunction("w");
const x = countFunction("x");
const y = countFunction("y");
const z = countFunction("z");

const letters = {
    "A": a,
    "B": b,
    "C": c,
    "D": d,
    "E": e,
    "F": f,
    "G": g,
    "H": h,
    "I": i,
    "J": j,
    "K": k,
    "L": l,
    "M": m,
    "N": n,
    "O": o,
    "P": p,
    "Q": q,
    "R": r,
    "S": s,
    "T": t,
    "U": u,
    "V": v,
    "W": w,
    "X": x,
    "Y": y,
    "Z": z
};

let sortable = [];
for (var num in letters) {
    sortable.push([num, letters[num]]);
}
const sorted=sortable.sort(function(a, b) {
    return b[1] - a[1];
});

let sortedNumbers = [];
for (var value in sorted) {
    sortedNumbers.push(sorted[value][1]);
}

let sortedLetters = [];
for (var value in sorted) {
    sortedLetters.push(sorted[value][0]);
}

for (let item=0; item<sorted.length; item++) {
    let strLetter = item.toString();
    document.getElementById(strLetter).innerHTML = sortedLetters[item];
}

for (let item=0; item<sorted.length; item++) {
    let strNumber = item.toString() + "n";
    document.getElementById(strNumber).innerHTML = sortedNumbers[item].toLocaleString();
} 

let total=0;
for (let item=0; item<sorted.length; item++) {
    total += sortedNumbers[item];
} document.getElementById("total").innerHTML = total.toLocaleString();

let percent = [];
for (var num in sortedNumbers) {
    percent.push((sortedNumbers[num] / total) * 100);
    document.getElementById(num + "p").innerHTML = percent[num].toFixed(1) + "%";
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
        <form id="form">
            <select id= "texts" name="texts" class="select">
                <option value="mobyDickText" id="mobyDick">Moby Dick</option> 
                <option value="huckFinnText" id="huckFinn">Huck Finn</option>
            </select>
        </form>
        <table class="result">
            <tbody>
                <th class="title" colspan="3" id="book-title"></th>
                <tr><td id="0" class="letter"></td><td id="0n" class="number"></td><td id="0p" class="percent"></td></tr>
                <tr><td id="1" class="letter"></td><td id="1n" class="number"></td><td id="1p" class="percent"></td></tr>
                <tr><td id="2" class="letter"></td><td id="2n" class="number"></td><td id="2p" class="percent"></td></tr>
                <tr><td id="3" class="letter"></td><td id="3n" class="number"></td><td id="3p" class="percent"></td></tr>
                <tr><td id="4" class="letter"></td><td id="4n" class="number"></td><td id="4p" class="percent"></td></tr>
                <tr><td id="5" class="letter"></td><td id="5n" class="number"></td><td id="5p" class="percent"></td></tr>
                <tr><td id="6" class="letter"></td><td id="6n" class="number"></td><td id="6p" class="percent"></td></tr>
                <tr><td id="7" class="letter"></td><td id="7n" class="number"></td><td id="7p" class="percent"></td></tr>
                <tr><td id="8" class="letter"></td><td id="8n" class="number"></td><td id="8p" class="percent"></td></tr>
                <tr><td id="9" class="letter"></td><td id="9n" class="number"></td><td id="9p" class="percent"></td></tr>
                <tr><td id="10" class="letter"></td><td id="10n" class="number"></td><td id="10p" class="percent"></td></tr>
                <tr><td id="11" class="letter"></td><td id="11n" class="number"></td><td id="11p" class="percent"></td></tr>
                <tr><td id="12" class="letter"></td><td id="12n" class="number"></td><td id="12p" class="percent"></td></tr>
                <tr><td id="13" class="letter"></td><td id="13n" class="number"></td><td id="13p" class="percent"></td></tr>
                <tr><td id="14" class="letter"></td><td id="14n" class="number"></td><td id="14p" class="percent"></td></tr>
                <tr><td id="15" class="letter"></td><td id="15n" class="number"></td><td id="15p" class="percent"></td></tr>
                <tr><td id="16" class="letter"></td><td id="16n" class="number"></td><td id="16p" class="percent"></td></tr>
                <tr><td id="17" class="letter"></td><td id="17n" class="number"></td><td id="17p" class="percent"></td></tr>
                <tr><td id="18" class="letter"></td><td id="18n" class="number"></td><td id="18p" class="percent"></td></tr>
                <tr><td id="19" class="letter"></td><td id="19n" class="number"></td><td id="19p" class="percent"></td></tr>
                <tr><td id="20" class="letter"></td><td id="20n" class="number"></td><td id="20p" class="percent"></td></tr>
                <tr><td id="21" class="letter"></td><td id="21n" class="number"></td><td id="21p" class="percent"></td></tr>
                <tr><td id="22" class="letter"></td><td id="22n" class="number"></td><td id="22p" class="percent"></td></tr>
                <tr><td id="23" class="letter"></td><td id="23n" class="number"></td><td id="23p" class="percent"></td></tr>
                <tr><td id="24" class="letter"></td><td id="24n" class="number"></td><td id="24p" class="percent"></td></tr>
                <tr><td id="25" class="letter"></td><td id="25n" class="number"></td><td id="25p" class="percent"></td></tr>
                <tr><td class="footer" colspan="3" id="total"></td></tr>
            </tbody>
        </table>
    </main>  
    <script src="script.js"></script>
  </body>
</html>
```

javascript function global-variables addeventlistener variable-assignment
1个回答
1
投票

好的，给你:)

你离得并不远

'use strict';

let aCount = 0,
  bCount = 0,
  cCount = 0,
  dCount = 0,
  eCount = 0,
  fCount = 0,
  gCount = 0,
  hCount = 0,
  iCount = 0,
  jCount = 0,
  kCount = 0,
  lCount = 0,
  mCount = 0,
  nCount = 0,
  oCount = 0,
  pCount = 0,
  qCount = 0,
  rCount = 0,
  sCount = 0,
  tCount = 0,
  uCount = 0,
  vCount = 0,
  wCount = 0,
  xCount = 0,
  yCount = 0,
  zCount = 0;

const mobyDickText=`Moby Dick text....`;
const huckFinnText=`Huck Finn text....`;
let dropdown = document.getElementById("texts");
let pick=dropdown.value;
const title=pick;
let chosenText;


//edit

let text



let letterCount;
let lowercaseText;

document.getElementById("book-title").innerHTML = title;

function changeTextValue() {
  
    pick = dropdown.value;
    if (pick === "huckFinnText") {
         chosenText = huckFinnText;
        console.log(chosenText);
    } else if (pick === "mobyDickText") {
        chosenText = mobyDickText;
        console.log(chosenText);
    } 


//edit

    text=chosenText;
    update();
    //return chosenText;




}








//edit

//console.log(text);
changeTextValue();





document.getElementById("texts").addEventListener("change", changeTextValue);

function countFunction(letter) {
    let letterCount=0;
    lowercaseText=text.toLowerCase();
    for (let i=0; i<=text.length-1; i++) {
      if (letter === lowercaseText.charAt(i)) {
          letterCount++;
      }
    } return letterCount;
  } 





//edit

function update(){
  
  
const a = countFunction("a");
const b = countFunction("b");
const c = countFunction("c");
const d = countFunction("d");
const e = countFunction("e");
const f = countFunction("f");
const g = countFunction("g");
const h = countFunction("h");
const i = countFunction("i");
const j = countFunction("j");
const k = countFunction("k");
const l = countFunction("l");
const m = countFunction("m");
const n = countFunction("n");
const o = countFunction("o");
const p = countFunction("p");
const q = countFunction("q");
const r = countFunction("r");
const s = countFunction("s");
const t = countFunction("t");
const u = countFunction("u");
const v = countFunction("v");
const w = countFunction("w");
const x = countFunction("x");
const y = countFunction("y");
const z = countFunction("z");

const letters = {
    "A": a,
    "B": b,
    "C": c,
    "D": d,
    "E": e,
    "F": f,
    "G": g,
    "H": h,
    "I": i,
    "J": j,
    "K": k,
    "L": l,
    "M": m,
    "N": n,
    "O": o,
    "P": p,
    "Q": q,
    "R": r,
    "S": s,
    "T": t,
    "U": u,
    "V": v,
    "W": w,
    "X": x,
    "Y": y,
    "Z": z
};

let sortable = [];
for (var num in letters) {      //console.log(num,letters[num]);
    sortable.push([num, letters[num]]);
}
const sorted=sortable.sort(function(a, b) {
    return b[1] - a[1];
});

let sortedNumbers = [];
for (var value in sorted) {
    sortedNumbers.push(sorted[value][1]);
}

let sortedLetters = [];
for (var value in sorted) {
    sortedLetters.push(sorted[value][0]);
}

for (let item=0; item<sorted.length; item++) {
    let strLetter = item.toString();
    document.getElementById(strLetter).innerHTML = sortedLetters[item];
}

for (let item=0; item<sorted.length; item++) {
    let strNumber = item.toString() + "n";
    document.getElementById(strNumber).innerHTML = sortedNumbers[item].toLocaleString();
} 

let total=0;
for (let item=0; item<sorted.length; item++) {
    total += sortedNumbers[item];
} document.getElementById("total").innerHTML = total.toLocaleString();

let percent = [];
for (var num in sortedNumbers) {
    percent.push((sortedNumbers[num] / total) * 100);
    document.getElementById(num + "p").innerHTML = percent[num].toFixed(1) + "%";
}



//edit

}//update
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main">
        <form id="form">
            <select id= "texts" name="texts" class="select">
                <option value="mobyDickText" id="mobyDick">Moby Dick</option> 
                <option value="huckFinnText" id="huckFinn">Huck Finn</option>
            </select>
        </form>
        <table class="result">
            <tbody>
                <th class="title" colspan="3" id="book-title"></th>
                <tr>
                      <td id="0" class="letter"></td>
                      <td id="0n" class="number"></td>
                      <td id="0p" class="percent"></td>
                </tr>
                <tr><td id="1" class="letter"></td><td id="1n" class="number"></td><td id="1p" class="percent"></td></tr>
                <tr><td id="2" class="letter"></td><td id="2n" class="number"></td><td id="2p" class="percent"></td></tr>
                <tr><td id="3" class="letter"></td><td id="3n" class="number"></td><td id="3p" class="percent"></td></tr>
                <tr><td id="4" class="letter"></td><td id="4n" class="number"></td><td id="4p" class="percent"></td></tr>
                <tr><td id="5" class="letter"></td><td id="5n" class="number"></td><td id="5p" class="percent"></td></tr>
                <tr><td id="6" class="letter"></td><td id="6n" class="number"></td><td id="6p" class="percent"></td></tr>
                <tr><td id="7" class="letter"></td><td id="7n" class="number"></td><td id="7p" class="percent"></td></tr>
                <tr><td id="8" class="letter"></td><td id="8n" class="number"></td><td id="8p" class="percent"></td></tr>
                <tr><td id="9" class="letter"></td><td id="9n" class="number"></td><td id="9p" class="percent"></td></tr>
                <tr><td id="10" class="letter"></td><td id="10n" class="number"></td><td id="10p" class="percent"></td></tr>
                <tr><td id="11" class="letter"></td><td id="11n" class="number"></td><td id="11p" class="percent"></td></tr>
                <tr><td id="12" class="letter"></td><td id="12n" class="number"></td><td id="12p" class="percent"></td></tr>
                <tr><td id="13" class="letter"></td><td id="13n" class="number"></td><td id="13p" class="percent"></td></tr>
                <tr><td id="14" class="letter"></td><td id="14n" class="number"></td><td id="14p" class="percent"></td></tr>
                <tr><td id="15" class="letter"></td><td id="15n" class="number"></td><td id="15p" class="percent"></td></tr>
                <tr><td id="16" class="letter"></td><td id="16n" class="number"></td><td id="16p" class="percent"></td></tr>
                <tr><td id="17" class="letter"></td><td id="17n" class="number"></td><td id="17p" class="percent"></td></tr>
                <tr><td id="18" class="letter"></td><td id="18n" class="number"></td><td id="18p" class="percent"></td></tr>
                <tr><td id="19" class="letter"></td><td id="19n" class="number"></td><td id="19p" class="percent"></td></tr>
                <tr><td id="20" class="letter"></td><td id="20n" class="number"></td><td id="20p" class="percent"></td></tr>
                <tr><td id="21" class="letter"></td><td id="21n" class="number"></td><td id="21p" class="percent"></td></tr>
                <tr><td id="22" class="letter"></td><td id="22n" class="number"></td><td id="22p" class="percent"></td></tr>
                <tr><td id="23" class="letter"></td><td id="23n" class="number"></td><td id="23p" class="percent"></td></tr>
                <tr><td id="24" class="letter"></td><td id="24n" class="number"></td><td id="24p" class="percent"></td></tr>
                <tr><td id="25" class="letter"></td><td id="25n" class="number"></td><td id="25p" class="percent"></td></tr>
                <tr><td class="footer" colspan="3" id="total"></td></tr>
            </tbody>
        </table>
    </main>  
    <script src="script.js"></script>
  </body>
</html>

  • 我将更新表格的代码放入一个名为 

    update

    的函数中

  • 看起来整个处理是在一个名为的全局变量上完成的 

    text
    ，我没有立即调用
    changeTextValue
    来初始化它

  • 在

    changeValueText
    中，我没有返回值，而是分配了它 到全局变量
    text
    ，然后调用该
    update
    函数

  • 我一直等到您确认全局变量已设置 console.log 然后手动调用你的 

    changeValueText
    以便 
    update
    函数被调用，您的表格显示了一些结果

是的，你可能是一个新手，但我们都是从那里开始的，你的程序表现出了独创性，你努力推动自己，干得好:)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.