if/else - if 字符串不显示

If/Else - If String Not Displaying?

本文关键字：if 显示 字符串 else      更新时间：2023-09-26

我有一个输入字符串（"A Name"）的提示。关于我if/else发言if部分。当执行完成并输入字符串时，它会执行它应该执行的操作。

但是，在实际语句中if(x === null)单击cancel按钮时不会发生任何情况。我认为这是因为"y"变量下的内容。

JAVASCRIPT：

<script>
    var x = prompt('Enter a name');
    var y = x.charAt(0).toUpperCase() + x.slice(1).toLowerCase();
    if(x === null){
        document.getElementById("name_placement").innerHTML = "Welcome to My Site!";
    }
    else
    {
        document.getElementById("name_placement").innerHTML = "Hello " + y + ", Welcome To My Site";
    }

您的问题是，当x具有值时 null ，正如您对取消按钮情况所期望的那样，语句

var y = x.charAt(0).toUpperCase() + x.slice(1).toLowerCase();

将引发异常 - 您不能在 null 上调用这些方法。该异常会破坏脚本并阻止其显示任何内容。检查错误控制台。

你必须把它移到你的 else 块中，只有在x是一个字符串时才执行它：

var x = prompt('Enter a name');
if (x === null) {
    document.getElementById("name_placement").innerHTML = "Welcome to My Site!";
} else {
    var y = x.charAt(0).toUpperCase() + x.slice(1).toLowerCase();
    document.getElementById("name_placement").innerHTML = "Hello " + y + ", Welcome To My Site";
}

你可以这样做

var x = prompt('Enter a name');
var y = (x) ? x.charAt(0).toUpperCase() + x.slice(1).toLowerCase() : '';
alert(x === null ? "Welcome to My Site!" : "Hello " + y + ", Welcome To My Site");

如果您还希望它处理空字符串，例如如果有人只按 OK 而不输入任何字符，请将x === true更改为!x 

var x = prompt('Enter a name');
var y = (x) ? x.charAt(0).toUpperCase() + x.slice(1).toLowerCase() : '';
alert(!x ? "Welcome to My Site!" : "Hello " + y + ", Welcome To My Site");

如果您不输入任何内容prompt将返回一个空字符串''，如果您单击取消按钮x将等于null，因此在这两种情况下，您都会得到 falsy 值，您可以使用 if(x) 而不是 if(x === null) 来处理该值。

同时操作块if(x) x值。

当用户按"取消"时x为空

当用户按"确定"时x为空字符串

问题是您无法设置y何时x null

 var x = prompt('Enter a name');
 if(x===null || x==='' )
 {
     document.getElementById("name_placement").innerHTML = "Welcome to My Site!";
 }
 else
 {
     var y = x.charAt(0).toUpperCase() + x.slice(1).toLowerCase();
     document.getElementById("name_placement").innerHTML = "Hello " + y + ", Welcome To My Site";
 }
         
<div id="name_placement"></div>

相关文章：