Question

我正在创建一个简单的网站，它采用随机生成的数字，并根据该数字，相应地更改段落的文本。我正在测试空值，已经解决了。但是，根据文本是在句子的开头还是结尾，文本应该大写或不大写。我似乎无法解决这个问题。我的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>

Answer 1

嗯，它实际上是有效的，但经过一次＆＃34;赞美＆＃34; userName不再为null或未定义，因此您的外部if-block不会再次触发。如果您想每次重新分配userName，可以使用布尔值来检查用户或代码是否实际选择了当前userName。

代码可能如下所示：

＆＃13;

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+".";
    };
}

＆＃13;

尽管如此，你真的应该考虑简化你的代码，因为很多段都是一遍又一遍地重复。

Answer 2

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

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

string.toUpperCase()

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

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

其中string是您想要大写的文字。

Answer 3

如果阻止，你可以尝试使用else。

<强> E.G：

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 + ".";
};

等等。

Answer 4

在表示赞美之前将您的名字大写即

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

添加

userName = capitalizeFirstLetter(userName);

在你改变innerHTMLs的if条件之前

Answer 5

尝试这样。首先将名称改为小写。然后拿起第一个字符改成大写并替换第一个字符，并将第一个字符的名称改为大写。

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

如果语句无法正常运行

5 个答案: