如何执行循环直到用户在提示时选择取消？

Question

我正在编写一个程序，用户输入被分解为字母，然后显示为ASCII字符。

用户可以一次又一次地在提示框中输入一个输入，直到他选择Cancel，按下Enter键或Esc键。

例如，如果你输入遵循“你好”由“再见”提示时，和第三次，你只要按下Enter键没有输入任何内容，你应该看到这一点：

Word entered is "Hello" 
H = 72 
e = 101 
l = 108 
l = 108 
o = 111 

Word entered is "Bye" 
B = 66 
y = 121 
e = 101 

我的问题是

1）“道进入是......”行不出现，

2）提示信息只有一次，无论用户是否离开空白或不执行。

这里是我的代码如下所示：

<script> 
    do { 
     var word = prompt ("Please enter a word of your choice"); 
     if (word == null) 
      document.getElementById("myDiv").innerHTML = "Word entered is " + "\"" + word + "\""; 
     else 
      break; 
    } while (word == null); 

    var letter = "<ul>"; 

    for (var i = 0; i < word.length; i++){ 
     letter += word[i] + " = " + word.charCodeAt(i) + "<br>"; 
    } 

    letter += "</ul>"; 
    document.getElementById("myDiv").innerHTML = letter; 
</script> 

Answer 1

我认为你需要用“”分隔“单词”，并列出每个单词的字母。

// this function make the variables not glabel. 
 
(function() { 
 
    var words = ''; 
 

 
    while (words === '') { 
 
    // get the input until something not empty or 'Esc' 
 
    words = prompt("Please enter a word of your choice"); 
 
    }; 
 

 
    // this function will return the HTML which will list the letters of the word 
 
    var listLetters = function(word) { 
 
    letters = ""; 
 
    for (var i = 0; i < word.length; i++) { 
 
     letters = letters + word[i] + " = " + word[i].charCodeAt() + "<br>"; 
 
    } 
 
    return letters; 
 
    } 
 

 
    // get target 
 
    var t = document.getElementById("myDiv"); 
 
    // empty the target 
 
    t.innerHTML = ''; 
 

 
    // process the inputs 
 
    words.split(' ').forEach(function(word) { 
 
    // print the word 
 
    t.innerHTML += 'Word entered is "' + word + '"<br>'; 
 
    // list the letters 
 
    t.innerHTML += listLetters(word) + '<br>'; 
 
    }); 
 

 
})();

<div id='myDiv'></div>

Answer 2

你检查，如果他们不输入一个单词，然后你显示字变量。你只想显示他们选择的单词，如果它不为空。

Answer 3

看代码https://jsfiddle.net/q41gm0j6/

基本上你是缺少一个回报;

(function(){ 
    do { 
    var word = prompt ('Please enter a word of your choice'); 
     if (word === '' || word === null){ 
     word = ''; 
     var t = document.getElementById('myDiv'); 
     t.innerHTML = 'Word entered is' + word; 
     return; 
     } 
     else break; 
    } while (word === null); 
     var letter = '<ul>'; 
     for (var i = 0; i < word.length; i++){ 
     letter += word[i] + ' = ' + word.charCodeAt(i) + '<br>'; 
     } 
     letter += '</ul>'; 
     document.getElementById('myDiv').innerHTML += letter; 
    })(); 

Answer 4

选中此plunker代码，我已经为你实现所需的功能。希望这可以帮助你。

您的问题1的原因是要覆盖的div为什么的innerHTML“字进入是......”行不出现

https://plnkr.co/edit/RN0yNxDAsTSQQeSvGYb9?p=info

window.onload = function() { 
var word = ""; 
do { 
    word = prompt ("Please enter a word of your choice"); 

    if(word !== null){ 

    var span = document.createElement("span"); 

      span.innerHTML = "Word entered is " + "\"" + word + "\""; 

      document.getElementById("myDiv").appendChild(span); 


      var ul = document.createElement("ul"); 

      var letter = "<ul>"; 

      for (var i = 0; i < word.length; i++){ 
       letter += word[i] + " = " + word.charCodeAt(i) + "<br>"; 
      } 

      letter += "</ul>"; 


      ul.innerHTML = letter; 

      document.getElementById("myDiv").appendChild(ul); 
} 

} 

while (word !== null); 

}