1

I've been studying JavaScript from a lot of sources recently to better understand it and I still have trouble for anything past basic functions and syntax which most tutorials show. I'm familiar with object oriented programming, but when trying something more "complex" it breaks down. Is there a thing trying to perform multiple conditions within a function? I can do things one at a time but it wouldn't be optimal. Just really wanna better understand vs instant solutions please. :)

"Write a JavaScript program which will display a button and ask user to enter one character and a name. Your program will then put the name inside a box which is formed by using the character entered. The following demonstrate a test run when user entered a * and a name ‘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>
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
A-Me-W
  • 11
  • 1

2 Answers2

1

Basic Javascript Problem In Your Code

  1. Change for (i<8) to while (i<8) [syntax of for loop please see here ]
  2. You missed a + after "<br>". Change document.write("<br>" symbol + symbol) to document.write("<br>" + symbol + symbol)
  3. You need to return name in function askName() and pass it to name in the function of askSymbol(), because name is local varaible in the function.
  4. You need to pass parameter of name and symbol to the function nameInBorder() like this nameInBorder(name, symbol).

According to your problem, these fixes will provide you a good start, but not giving you full border so you may need to adjust accordingly.

Working Code

<!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>
Tien Liang
  • 245
  • 1
  • 3
  • Thanks for the help. I was getting close then, just need to be more patient. I already asked this question to the person above, but. * Involving the scope, instead of using 'Let' , wouldn't 'Var' allow the variables to be seen outside the function? – A-Me-W Apr 02 '18 at 02:10
  • If you want the variables to be seen outside the funciton, you will have to declare them outside as global variables. Just like what you did for `var i = 0;` If you declare them in the function, they will not be seen in another function. The difference between var and let can be seen [here](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable-in-jav) Let me know if you have any more question :) – Tien Liang Apr 02 '18 at 02:18
0

There's a lot of things to address with your provided code.

  1. Your for loop structure on lines 19 & 27 are incorrect, you are using a while based structure. As such while (i < 8) would be the correct use. Otherwise rewrite your for statement as something like for (i = 0; i < 8; i++) {, this would also remove your increment at the end of your for block.

  2. On line 23, you're missing a + when concatenating your document.write. It should look something like document.write("<br>" + symbol + symbol);

  3. On line 24, you're attempting to concatenate two document.write function calls. It is not possible to concatenate in this manner, if you're attempting to add a new line at the end of the output you can simply add the <br /> tag like you've been doing previously to create the new line.

  4. Scope. Scope. Scope. Your variables name and symbol are not visible outside of their functions bodies. As such your function call to nameInBorder has no knowledge of them as they do not exist in that context. If you were to maintain the structure you have now you would have to return name from askName() to askSymbol() and pass the name and symbol as parameters to the nameInBorder() function.

Trying to keep your code as close to as you provided as possible, something like this would be a valid choice:

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);
}

However it may be worthwhile to have your button make the function call to nameInBorder() and have that make the calls to askName() and askSymbol(), however it may not be necessary to have those as functions themselves as they would only return the prompt.

i.e.

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 #", "");
}

and your button would be: <input type="button" value="Get started now!" onclick="nameInBorder();">

Jesse
  • 51
  • 4
  • Thanks for the help. Yeah, I was changing a lot around that I didn't realize I forgot to change the 'for' loop to 'while'. * Involving the scope, instead of using 'Let' , wouldn't 'Var' allow the variables to be seen outside the function? – A-Me-W Apr 02 '18 at 02:09
  • @A-Me-W no, changing the declaration of the variables or using `var` instead of `let` would not change the scope in this case (although let does have different scope functionality than var), the only way they would be accessible outside of the functions is if you declared them outside of the functions, similarly to what you've done with your `i`. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let – Jesse Apr 02 '18 at 02:58