How do I solve this VSC problem? (Beginner BTW)

So I have been coding for a little bit and decided to try a tutorial that uses VSC (Visual Studios Code). This is my first time using VSC and I made sure that I have added the right extensions, made sure they were the right versions , and wrote the proper code. I even used a online editor to double check my code and it works!

However, Even though I have a working program, I can’t run my code. Therefore , I can’t test the program. All it does it give a notification saying “code not supported or defined”, or it will just start and end the code without anything running. How do I solve this?

Video:

https://www.youtube.com/watch?v=IyDVvGmzTlo&list=PLhEpn9gptQtEjUJOCmVnUx0pB0VquVvnu&index=16&t=0s

Code:

JSTUT.html:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width = device-width,
      initial-scale = 1">
      <title>JavaScript Tutorial</title>
      <link rel="stylesheet" href="https://
      stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
      crossorigin="anonymous">
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/
      4.3.1/js/bootstrap.min.js" 
      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 
      crossorigin="anonymous"></script>
      <link rel="stylesheet" type="text/css" 
      href="mainstyle.css">
      <script src="JSTUT.js"></script>


</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h3>MadLib Generator</h3>
            <form class="form-inline">
                <input type="text" class="form-control"
                id="i0" value="Person"/>
                <input type="text" class="form-control"
                id="i1" value="Noun"/>
                <input type="text" class="form-control"
                id="i2" value="Verb"/>
                <input type="text" class="form-control"
                id="i3" value="Verb"/>
                <input type="text" class="form-control"
                id="i4" value="Verb"/>
                <input type="text" class="form-control"
                id="i5" value="Verb"/>
                <input type="text" class="form-control"
                id="i6" value="Plural Verb"/>
                <input type="text" class="form-control"
                id="i7" value="Verb"/>
                <input type="text" class="form-control"
                id="i8" value="Adjective"/>
                <input type="text" class="form-control"
                id="i9" value="Noun"/>
                <input type="text" class="form-control"
                id="i10" value="Event"/>
                <input type="text" class="form-control"
                id="i11" value="Noun"/>
                <input type="text" class="form-control"
                id="i12" value="Body Part"/>
                <input type="text" class="form-control"
                id="i13" value="Noun"/>
            </form><br><br>
            <button type="submit" class="btn-lg" 
            onClick="alert('Hello')">Hello</button>
            <button type="submit" class="btn-lg" 
            onClick="calcPI(100000000)">Get PI</button>
            <button type="submit" class="btn-lg" 
            onClick="getFibList()">Get Fibs</button>
            <button type="submit" class="btn-lg" 
            onClick="madLibGenerator()">MadLib 
            Generate</button><br><br>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">Output</span>
                </div>
                <textarea id="output1" rows="18" 
                class="form-control"></textarea>
            </div>

        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/
    libs/popper.js/1.14.7/umd/popper.min.js" 
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" 
    crossorigin="anonymous"></script>
</body>
</html>

JSTUT.js:

// Pi = 4/1 - 4/3 + 4/5 - 4/7...

function calcPI(iterations){

  let pi = 0, divisor = 1;

  for(i = 0; i <= iterations; i++){

      pi = pi + (4/divisor) - (4/

      (divisor + 2));

      divisor += 4;

  }

  document.getElementById("output1")

  .value = pi.toFixed(10);

}

mainstyle.css:

.jumbotron{
  background-color:rgb(37,35,124);
  color:white;
}
.textarea{height: 200px;}
html{
  font-size: 1em;
}

I am at 23:29 in the video. Thanks in advance!

open your html file with your web browser

1 Like

How do I do that? Where do you do that?

Literally open the HTML file in the browser. Like you would open a file in any other program. file -> open -> select the file -> click ok

1 Like

Okay, thank you very much!