如果语句无法正常运行

我正在创建一个简单的网站，该网站采用随机生成的数字，并根据该数字相应地更改段落的文本。我正在测试空值，这已解决。但是，文本应该大写或不大写，取决于它是在句子的开头还是结尾。我似乎无法解决这个问题。我的jsfiddle的链接如下：

https://jsfiddle.net/MCBlastoise/n2vh40ah/

下面是我的代码片段：

.heading {
  text-align: center;
  font-family: Courier New;
  color: green;
  font-weight: bold;
}
.button {
  width: 250px;
  height: 250px;
  border-style: solid;
  border-color: red;
  border-width: 5px;
  border-radius: 60px;
  margin: auto;
  text-align: center;
  position: relative;
}
.button:hover {
  background-color: #7CFC00;
  cursor: pointer
}
.button-text {
  font-family: Courier New;
  color: #9400D3;
  font-size: 76px;
  line-height: 140%;
}
.text {
  color: red;
  font-family: Futura, Trebuchet MS, Arial, sans-serif;
  font-size: 21px;
}
#compliment {
  text-align: center;
  font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif;
  color: #ffd400;
  font-size: 40px;
  font-weight: bold;
  margin-top: -20px;
}
.hover {
  width: 108px;
  height: 100px;
  background-color: orange;
  border-style: solid;
  border-color: black;
  border-width: 5px;
  text-align: center;
  margin-top: -30px;
  margin-left: 1175px;
  position: absolute;
}
.block-text {
  color: red;
  font-family: Futura, Trebuchet MS, Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="Complement.css">
  <title>The Compliment Machine</title>
</head>
<body>
  <h2 class="heading">The Compliment Machine</h2>
  <p class="text">In the interest of spreading holiday cheer, I have designed this website with one goal in mind. With the assumption that you have already inputted your name, pressing the button below will randomly generate a compliment. Hopefully, this little experiment
    will brighten up your day.</p>
  <div class="button" onclick="inspire()" id="disappear"> <span class="button-text">Click me!</span> 
  </div>
  <br style="line-height:500%">
  <p id="compliment"></p>
  <script>
    var userName = prompt("What is your name?");
    var compliment1 = "Have a nice day";
    var compliment2 = "you contribute to society";
    var compliment3 = "Always be yourself";
    var compliment4 = "you are a wonderful person";
    var compliment5 = "Keep up the good work";
    var compliment6 = "never stop believing in yourself";
    var compliment7 = "you have a great sense of humor";
    var compliment8 = "You should feel proud of yourself";
    var compliment9 = "Never stop trying";
    var compliment10 = "you are a winner";
  </script>
  <script>
    function inspire() {
      var result = Math.random();
      //This code block checks for null, undefined, and other falsy values in the prompt.
      if (userName === null || userName === undefined || userName === "" || !userName) {
        if (0 <= result && result < 0.11) {
          userName = "friend";
        }
        if (0.21 <= result && result < 0.31) {
          userName = "friend";
        }
        if (0.41 <= result && result < 0.51) {
          userName = "friend";
        }
        if (0.71 <= result && result < 0.81) {
          userName = "friend";
        }
        if (0.81 <= result && result < 0.91) {
          userName = "friend";
        }
        if (0.11 <= result && result < 0.21) {
          userName = "Friend";
        }
        if (0.31 <= result && result < 0.41) {
          userName = "Friend";
        }
        if (0.51 <= result && result < 0.61) {
          userName = "Friend";
        }
        if (0.61 <= result && result < 0.71) {
          userName = "Friend";
        }
        if (0.91 <= result && result < 1) {
          userName = "Friend";
        }
      }
      //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'.
      if (0 <= result && result < 0.11) {
        document.getElementById("compliment").innerHTML = compliment1 + ", " + userName + "!";
      };
      if (0.11 <= result && result < 0.21) {
        document.getElementById("compliment").innerHTML = userName + ", " + compliment2 + ".";
      };
      if (0.21 <= result && result < 0.31) {
        document.getElementById("compliment").innerHTML = compliment3 + ", " + userName + ".";
      };
      if (0.31 <= result && result < 0.41) {
        document.getElementById("compliment").innerHTML = userName + ", " + compliment4 + ".";
      };
      if (0.41 <= result && result < 0.51) {
        document.getElementById("compliment").innerHTML = compliment5 + ", " + userName + "!";
      };
      if (0.51 <= result && result < 0.61) {
        document.getElementById("compliment").innerHTML = userName + ", " + compliment6 + ".";
      };
      if (0.61 <= result && result < 0.71) {
        document.getElementById("compliment").innerHTML = userName + ", " + compliment7 + ".";
      };
      if (0.71 <= result && result < 0.81) {
        document.getElementById("compliment").innerHTML = compliment8 + ", " + userName + ".";
      };
      if (0.81 <= result && result < 0.91) {
        document.getElementById("compliment").innerHTML = compliment9 + ", " + userName + ".";
      };
      if (0.91 <= result && result < 1) {
        document.getElementById("compliment").innerHTML = userName + ", " + compliment10 + ".";
      };
    }
  </script>
</body>
</html>

嗯，它确实有效，但是经过一次"赞美"后，userName不再为空或未定义，因此您的外部 if 块不会再次触发。如果要每次都重新分配userName，可以使用布尔值来检查当前userName是否实际由用户或代码选择。

代码可能如下所示：

var userName = prompt("What is your name?");
//We still use your userName-check, but we store the result in a variable so we can access it everytime the user clicks the button
var generatedUsername = userName === null || userName === undefined || userName === "" || !userName;
var compliment1 = "Have a nice day";
var compliment2 = "you contribute to society";
var compliment3 = "Always be yourself";
var compliment4 = "you are a wonderful person";
var compliment5 = "Keep up the good work";
var compliment6 = "never stop believing in yourself";
var compliment7 = "you have a great sense of humor";
var compliment8 = "You should feel proud of yourself";
var compliment9 = "Never stop trying";
var compliment10 = "you are a winner";
function inspire() {
    var result = Math.random();
    //This code block changes the username if it was chosen by code
    if (generatedUsername) {
        if (0 <= result && result < 0.11) {
            userName = "friend";
        }
        if (0.21 <= result && result < 0.31) {
            userName = "friend";
        }
        if (0.41 <= result && result < 0.51) {
            userName = "friend";
        }
        if (0.71 <= result && result < 0.81) {
            userName = "friend";
        }
        if (0.81 <= result && result < 0.91) {
            userName = "friend";
        }
        if (0.11 <= result && result < 0.21) {
            userName = "Friend";
        }
        if (0.31 <= result && result < 0.41) {
            userName = "Friend";
        }
        if (0.51 <= result && result < 0.61) {
            userName = "Friend";
        }
        if (0.61 <= result && result < 0.71) {
            userName = "Friend";
        }
        if (0.91 <= result && result < 1) {
            userName = "Friend";
        }
    }
		
    //This code block changes the sentence with ID 'compliment' randomly, based on the value of the variable 'result'.
    if (0 <= result && result < 0.11) {
        document.getElementById("compliment").innerHTML = compliment1+", "+userName+"!";
    };
    if (0.11 <= result && result < 0.21) {
        document.getElementById("compliment").innerHTML = userName+", "+compliment2+".";
    };
    if (0.21 <= result && result < 0.31) {
        document.getElementById("compliment").innerHTML = compliment3+", "+userName+".";
    };
    if (0.31 <= result && result < 0.41) {
        document.getElementById("compliment").innerHTML = userName+", "+compliment4+".";
    };
    if (0.41 <= result && result < 0.51) {
        document.getElementById("compliment").innerHTML = compliment5+", "+userName+"!";
    };
    if (0.51 <= result && result < 0.61) {
        document.getElementById("compliment").innerHTML = userName+", "+compliment6+".";
    };
    if (0.61 <= result && result < 0.71) {
        document.getElementById("compliment").innerHTML = userName+", "+compliment7+".";
    };
    if (0.71 <= result && result < 0.81) {
        document.getElementById("compliment").innerHTML = compliment8+", "+userName+".";
    };
    if (0.81 <= result && result < 0.91) {
        document.getElementById("compliment").innerHTML = compliment9+", "+userName+".";
    };
    if (0.91 <= result && result < 1) {
        document.getElementById("compliment").innerHTML = userName+", "+compliment10+".";
    };
}

尽管如此，您确实应该考虑简化代码，因为许多段会一遍又一遍地重复。

在赞美之前大写你的名字即

function capitalizeFirstLetter(name) {
    return name.charAt(0).toUpperCase() + name.slice(1);
}

加

userName = capitalizeFirstLetter(userName);

在更改内部HTML的if条件之前

您可以使用 javascript .toUpperCase() 方法将字符转换为大写。

如果要将整个单词大写，请使用：

string.toUpperCase()

如果只想将单词的第一个字母大写，请使用：

string.charAt(0).toUpperCase() + string.slice(1)

其中string是要大写的文本。

试试这样。首先将名称更改为小写。然后选择第一个字符更改为大写并替换第一个字符并获取第一个字符作为大写的名称。

var userName = prompt("What is your name?");
var lower = username.toLowerCase();//changes to all characters at lower (because if input is aBcX then it changes to abcx)
var first = username.slice(0,1); //now outputs first character(a in abcx)
var finalname = username.replace(first,first.toUpperCase(first));//outputs Abcx

你可以尝试使用 else if block。

例如：

if (0 <= result && result < 0.11) {
    document.getElementById("compliment").innerHTML = compliment1 + ", " + userName + "!";
} else if (0.11 <= result && result < 0.21) {
    document.getElementById("compliment").innerHTML = userName + ", " + compliment2 + ".";
} else if (0.21 <= result && result < 0.31) {
    document.getElementById("compliment").innerHTML = compliment3 + ", " + userName + ".";
};

等等。

相关内容

最新更新

热门标签：