代码中的基本Javascript问题

Question

我最近一直在研究很多来源的JavaScript，以便更好地理解它，而且我仍然遇到过大多数教程所显示的基本函数和语法的问题。我熟悉面向对象的编程，但是当尝试更“复杂”的东西时，它会崩溃。有没有尝试在函数中执行多个条件？我可以一次做一件事，但这不是最佳的。我真的想更好地了解vs即时解决方案。：）

“编写一个JavaScript程序，它将显示一个按钮，并要求用户输入一个字符和一个名称。然后你的程序将名字放在一个框中，该框由使用输入的字符组成。以下演示了用户输入*和名称“John”时的测试运行。 “

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      width: 300px;
      border: 1px solid RED;
      padding: 10px;
      margin: 25px;
    }
  </style>

  <script>
    var i = 0;

    function nameInBorder() {

      for (i < 8) {
        document.write(symbol);
        i++
      }
      document.write("<br>"
          symbol + symbol) +
        document.writeln(name + symbol + symbol);
      for (i < 8) {
        document.write(symbol);
        i++
      }

    }

    function askName() {
      let name = prompt("Enter your name", "");
    }

    function askSymbol() {
      let symbol = prompt("Type a symbol to border your name such as * or #", "");

      askName();
      nameInBorder();
    }
  </script>
</head>

<body>

  <h1>Put your name in a box
    <br>
    <br>
    <input type="button" value="Get started now!" onclick="askSymbol()">
  </h1>

</body>

</html>

Answer 1

代码中的基本Javascript问题

将for (i<8)更改为while (i<8) [for循环语法，请参阅here]
+之后您错过了" "。将document.write(" " symbol + symbol)更改为document.write(" " + symbol + symbol)
您需要return name功能askName()并在name函数中将其传递给askSymbol()，因为名称是本地可变的功能。
您需要将name和symbol的参数传递给nameInBorder()这样的函数nameInBorder(name, symbol)。

根据您的问题，这些修补程序会为您提供一个良好的开端，但不会为您提供完整的边框，因此您可能需要相应调整。

工作代码

<!DOCTYPE html>
<html>

<head>
  <style>
    h1 {
      width: 300px;
      border: 1px solid RED;
      padding: 10px;
      margin: 25px;
    }
  </style>

  <script>
    var i = 0;

    function nameInBorder(name,symbol) {

      while (i < 8) { 
        document.write(symbol);
        i++
      }
      document.write("<br>" +
          symbol + symbol) +
        document.writeln(name + symbol + symbol);
      while (i < 8) {
        document.write(symbol);
        i++
      }

    }

    function askName() {
      let name = prompt("Enter your name", "");
	return name;
    }

    function askSymbol() {
      let symbol = prompt("Type a symbol to border your name such as * or #", "");

      
      nameInBorder(askName(),symbol);
    }
  </script>
</head>

<body>

  <h1>Put your name in a box
    <br>
    <br>
    <input type="button" value="Get started now!" onclick="askSymbol()">
  </h1>

</body>

</html>

Answer 2

您提供的代码需要解决很多问题。

第19行和第19行的for循环结构27是不正确的，您使用的是基于while的结构。因此while (i < 8)将是正确的用法。否则，将for语句重写为for (i = 0; i < 8; i++) {之类的内容，这也会在for block结束时删除您的增量。
在第23行，您在连接+时错过了document.write。它应该看起来像document.write(" " + symbol + symbol);
在第24行，您正在尝试连接两个document.write函数调用。以这种方式连接是不可能的，如果您尝试在输出的末尾添加新行，则可以像以前一样添加 标记来创建新行。
范围。范围。范围。您的变量name和symbol在其函数体之外是不可见的。因此，对nameInBorder的函数调用不了解它们，因为它们在该上下文中不存在。如果您要维护现在的结构，则必须将name从askName()返回到askSymbol()，并将name和symbol作为参数传递给nameInBorder()功能。

尽量让代码尽可能接近您提供的代码，这样的选择是有效的选择：

var i = 0;

function nameInBorder(name, symbol) {
    while (i < 8) {
        document.write(symbol);
        i++;
    }
    document.write("<br>" + symbol + symbol);
    document.write(name + symbol + symbol + "<br>");

    i = 0;
    while (i < 8) {
        document.write(symbol);
        i++;
    }
}

function askName() {
    let name = prompt("Enter your name", "");
    return name;
}

function askSymbol() {
    let symbol = prompt("Type a symbol to border your name such as * or #", "");

    let name = askName();
    nameInBorder(name, symbol);
}

然而，让按钮向nameInBorder()调用函数并调用askName()和askSymbol()可能是值得的，但是可能没有必要作为函数本身，因为它们只会返回提示符。

即

var i = 0;

function nameInBorder() {
    let name = askName();
    let symbol = askSymbol();
    while (i < 8) {
        document.write(symbol);
        i++;
    }
    document.write("<br>" + symbol + symbol);
    document.write(name + symbol + symbol + "<br>");

    i = 0;
    while (i < 8) {
        document.write(symbol);
        i++;
    }
}

function askName() {
    return prompt("Enter your name", "");
}

function askSymbol() {
    return prompt("Type a symbol to border your name such as * or #", "");
}

，您的按钮将是： <input type="button" value="Get started now!" onclick="nameInBorder();">

Javascript和移动过去的基本语法

2 个答案:

代码中的基本Javascript问题

工作代码