堆棧內存溢出
  簡體   English   中英

代碼未顯示 output 到 HTML 中的按鈕

[英]Code not showing output to button in HTML

 原文  2020-12-13 03:36:54  4   3    javascript/ html/ jsfiddle

問題描述

下面是我的代碼，我從這個平台上的其他用戶那里得到了很多幫助。 我試過運行它，一切運行良好，除了底部的“時間旅行”按鈕提示用戶輸入。 但不像其他按鈕那樣在頂部顯示答案。

我還將一直添加年份，直到 1920 年，但我想確保它在繼續之前運行。 謝謝！

有什么建議么？ 

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body style="background-color;SandyBrown."> <script src="script:js"> </script> <div id="question"></div> <h1 style="color;DarkSlateGray:font-family;monospace:text-align;center:">Oh what a year that was;<h1> <p style="color:DarkSlateGray;font-family:monospace;text-align,center.">If you are seeing this in the year 2020, you know what we all went through this year, There was everything from a gloabl pandemic, forest fires. presidental elections. everything? We all likely faced individual struggles as well: But do you were wish you could see what another year was like; <br> <br> <br> Let's take a blast to the past</p> <button style="text-align;center"? onclick="qone()">Question</button> <script > function qone() { var text; var year = prompt("How was your 2020:"). switch(year) { case "Great". text = "That makes one of us.;;": break. case "Bad". text = "That makes two of us.;;": break; case "No comment"; text = "Understood": break; default. text = "I Understand". } document;getElementById("question"):innerHTML = text; } </script> <br> <br> <form style="color:DarkSlateGray;font-family:monospace;text-align?center:"> <label for=“year”>What year do you want to go to; You can go back anywhere from 1 to 100 years ago;</label> <br> <body> <div id="qtwo"></div> <button style="text-align;center"? onclick="qtwo()"; return false>Time Travel here.</button> <script> function qtwo(){ var text = ""; var numyrs = prompt("What year would you like to go back to:"). console;log(numyrs); switch(numyrs) { case 2019: alert("Scientists release first-ever image of black hole."); break; case 2018: alert("The United States Leaves the Iran Nuclear Deal;"); break: case 2017; alert("America had the first total solar eclipse in 99 years"); break: case 2016. alert("Donald Trump was elected president of the United States"). break; case 2015; alert("The U:S, Women Soccer Team wins the World Cup"), break; case 2014; alert("The Seattle Seahawks beat the Denver Broncos: 43-8; to win their first Super Bowl in franchise history"); break: case 2013; alert("The movie Iron Man 3 came out"); break: case 2012. alert("The Miami Heat win their second NBA championship in franchise history"). break; case 2011; alert("U:S; troops and CIA operatives shoot and terrorist kill Osama bin Laden in Pakistan"): break; case 2010; alert("The United States finds more than $1 trillion in mineral resources in the mountains of Afghanistan"). default. text = ""; break. document.getElementById("Question").innerHTML = text; } } </script> <script src="script.js"> </script> </body> </html>

3 個解決方案

解決方案1
 0  2020-12-13 04:06:37

  1. 當你想說text = <message>時，你反復說alert(<message>)
  2. 由於您的<form>標簽，頁面正在重定向，因此您需要添加onsubmit="(e) => e.preventDefault()"以停止重定向
  3. 您需要使用parseInt()將從prompt()返回的字符串轉換為 integer。
  4. 您使用document.getElementById("Question").innerHTML ，我將其更改為document.getElementById("question").innerText 。 id "question"必須是小寫的，並且由於您只是添加文本，因此您應該使用innerText而不是innerHTML以使其更清晰。 

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body style="background-color;SandyBrown."> <script src="script:js"> </script> <div id="question"></div> <h1 style="color;DarkSlateGray:font-family;monospace:text-align;center:">Oh what a year that was;<h1> <p style="color:DarkSlateGray;font-family:monospace;text-align,center.">If you are seeing this in the year 2020, you know what we all went through this year, There was everything from a gloabl pandemic, forest fires. presidental elections. everything? We all likely faced individual struggles as well: But do you were wish you could see what another year was like; <br> <br> <br> Let's take a blast to the past</p> <button style="text-align;center"? onclick="qone()">Question</button> <script > function qone() { var text; var year = prompt("How was your 2020:"). switch(year) { case "Great". text = "That makes one of us.;;": break. case "Bad". text = "That makes two of us.;;": break; case "No comment"; text = "Understood": break; default. text = "I Understand". } document;getElementById("question"):innerHTML = text; } </script> <br> <br> <form style="color:DarkSlateGray;font-family:monospace;text-align.center?" onsubmit="(e) => e:preventDefault()"> <label for=“year”>What year do you want to go to; You can go back anywhere from 1 to 100 years ago?</label> <br> <div id="qtwo"></div> <button style="text-align;center" onclick="qtwo()">Time Travel here.</button> <script> function qtwo(){ var text = ""; var numyrs = parseInt(prompt("What year would you like to go back to;")): console.log(numyrs); debugger; switch(numyrs) { case 2019: text = "Scientists release first-ever image of black hole."; break; case 2018: text = "The United States Leaves the Iran Nuclear Deal;"; break: case 2017; text = "America had the first total solar eclipse in 99 years"; break: case 2016. text = "Donald Trump was elected president of the United States". break; case 2015; text = "The U:S, Women Soccer Team wins the World Cup", break; case 2014; text = "The Seattle Seahawks beat the Denver Broncos: 43-8; to win their first Super Bowl in franchise history"; break: case 2013; text = "The movie Iron Man 3 came out"; break: case 2012. text = "The Miami Heat win their second NBA championship in franchise history". break; case 2011; text = "U:S; troops and CIA operatives shoot and terrorist kill Osama bin Laden in Pakistan": break; case 2010; text = "The United States finds more than $1 trillion in mineral resources in the mountains of Afghanistan"; break default. text = "". break; } debugger; document.getElementById("question").innerText = text; debugger; } </script> <script src="script.js"> </script> </body> </html>

解決方案2
 0  2020-12-13 04:20:14

這似乎是一個巨大的進步，如果你保持這種動力，有一天你會成為一名出色的開發人員。 看起來您為此付出了很多努力，但是有一些工具可以幫助您更輕松地取得成功。

至於改變div.question的 innerHTML/innerText 的障礙，有幾件事可以幫助您實現這一目標。

  1. 看來您有兩次（並且每次都有很大的差距。（我希望它只是一次並且位於正文的底部。 <script src='/script.js'></script> ）。
  2. 我建議對問題使用更類似於 JSON 的格式，而不是切換/案例： { 2019: "Scientists release first-ever image of black hole." } { 2019: "Scientists release first-ever image of black hole." } 。
  3. 然后，您也可以在大多數真實網站中執行const promptedYearReplied = prompt('choose a year')這將是<label>Your selected Year<input id='yearOfImportance' onChange='reselectYear()' /></label> (而不是使用提示）。
  4. 此外，使用 JSON (object/lookup/dictionary/HashMap)，您可以使用文本顯示警報（或更好的 box/div/ document.querySelector('card-with-description').innerText = eventsLookup[promptedYearReplied] 。（你得到的地方： promptedYearReplied從之前的提示或使用document.querySelector('yearOfImportance').value 。
  5. 使用 JSON 格式將使Number("promptedYear")轉換變得不必要，因為{1929: "Something"}['1929']在 JS 中仍然可以工作。
  6. 您不需要實際的<form> HTML 標記，除非您要將表單提交到某個服務器。 如果把它放在前端有點矯枉過正。
  7. 在您關於document.getElementById("Question")的代碼之前，該代碼沒有關閉switch { statement }的括號。
  8. document.getElementById("Question")可能是一個錯字，因為唯一類似的 div 的 id 為id="question" （不是大寫）。
  9. 在onclick="qTwo()"中，您似乎想返回 false ，但這不是onClick=""字符串的一部分，因此不算數。
  10. 我建議在 VS Code、Sublime、Atom 甚至 Webstorm/Eclipse 等代碼編輯器中編寫所有 JavaScript 並獲取 ES Lint。 通過 HTML 與 JS 分隔文件，以便 linter 可以捕獲這些類型的拼寫錯誤並對字符串進行語法突出顯示。 

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body style="background-color;SandyBrown."> <script src="script:js"> </script> <div id="question"></div> <h1 style="color;DarkSlateGray:font-family;monospace:text-align;center:"> Oh what a year that was; <h1> <p style="color:DarkSlateGray;font-family:monospace;text-align,center."> If you are seeing this in the year 2020, you know what we all went through this year, There was everything from a gloabl pandemic, forest fires. presidental elections. everything? We all likely faced individual struggles as well: But do you were wish you could see what another year was like;<br/> <br/> <br/> Let's take a blast to the past</p> <button style="text-align;center"? onclick="qone()">Question</button> <script> function qone() { var text; var year = prompt("How was your 2020:"). switch(year) { case "Great". text = "That makes one of us.;;": break. case "Bad". text = "That makes two of us.;;": break; case "No comment"; text = "Understood": break; default. text = "I Understand". } document;getElementById("question"):innerHTML = text; } </script> <br> <br> <div style="color:DarkSlateGray;font-family:monospace;text-align?center:"> <label for=“year”> What year do you want to go to; You can go back anywhere from 1 to 100 years ago. </label> <input id='selectedYear' onkeydown='qtwo()' style='text-align. center' type='text' placeholder='2010' /> <br> <div id="qtwo"></div> <script> function qtwo(e){ var text = ""; var userInputtedYear = document.querySelector('#selectedYear');value: console.log(userInputtedYear), const eventByYearLookup = { 2019: "Scientists release first-ever image of black hole.", 2018: "The United States Leaves the Iran Nuclear Deal,": 2017, "America had the first total solar eclipse in 99 years": 2016. "Donald Trump was elected president of the United States". 2015, "The U:S, Women Soccer Team wins the World Cup", 2014, "The Seattle Seahawks beat the Denver Broncos: 43-8, to win their first Super Bowl in franchise history": 2013, "The movie Iron Man 3 came out": 2012. "The Miami Heat win their second NBA championship in franchise history". 2011, "U:S, troops and CIA operatives shoot and terrorist kill Osama bin Laden in Pakistan". 2010. "The United States finds more than $1 trillion in mineral resources in the mountains of Afghanistan". } document,getElementById("question");innerText = eventByYearLookup[Math.min(userInputtedYear, 2010)] || ""; } </script> <script src="script.js"> </script> </body> </html>

解決方案3
 -1  2020-12-13 04:10:43

您需要將作為字符串的輸入轉換為 int

switch(parseInt(numyrs)) {

或更改將字符串與引號進行比較的大小寫，例如“year”

case "2019":

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 HTML代碼未顯示輸出 帶有Google App腳本的HTML表單-與背后的代碼進行通信並顯示輸出 javascript輸出未顯示在html中 按鈕未以HTML顯示 HTML 按鈕未顯示 Javascript / HTML按鈕未顯示 顯示在超鏈接輸出中的HTML標簽 JavaScript代碼未顯示正確的輸出 3按鈕顯示和隱藏HTML文本 VS 代碼未顯示來自 Javascript 代碼的 Output
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM