Question 193742 in Html Question posted in
Some basic documentation can be found here.

Html – If some condition happens, how to execute redirect actions in javascript?

I’m very new to JavaScript but have worked on HTML from time to time.

I’ve made a text box with a button "Enter" to enter the answer, the problem is I don’t know how to really make the script (since I’m very new to JS). I want to know how to redirect the user to a new page, if
the answer is correct from the text box where they input.

I am also new to this website, so I might not know what to do here to start off with.

Here’s the code:

function submit() {
  var bynavn;
  if (bynavn == "Vonsild") {
    location.href = "/lykkelig.htm"
  } else {
    location.href = ""
  }
  document.getElementById('knap').src = enter;
  document.getElementById('tekst').src = bynavn;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <title>Niveau 5</title>
  <link href="/ZPWSODwhnzO!SJKAzmaPQ/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
  <div>
    <img src="hvorervihenne.png" width="1199" height="611" />
    <br> Hvor er vi?: <input type="text" id="tekst">
    <button onclick id="knap">Enter</button>
    <script src="/svar.js"></script>
  </div>
</body>

</html>

Help would be very much appreciated.

I’ve tried looking on this website, looking after my issue, but it was in a different coding language and I didn’t want to do that.

Tags:

2

Answers


  1. 0

    Try this code :

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex, nofollow">
    <meta name="googlebot" content="noindex, nofollow">
    <title>Niveau 5</title>
    <link href="/ZPWSODwhnzO!SJKAzmaPQ/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <div>
      <img src="hvorervihenne.png" width="1199" height="611"/>
      <br>
      Hvor er vi?: <input type="text" id="tekst">
      <button onclick="checkAnswer()">Enter</button>
      <script src="/svar.js"></script>
    </div>
    <script>
      function checkAnswer() {
        var bynavn = document.getElementById('tekst').value;
        
        if (bynavn.toLowerCase() === "vonsild") {
          window.location.href = "/lykkelig.htm";
        } else {
          window.location.href = ""; // Provide the URL you want to redirect to on incorrect answer
        }
      }
    </script>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    There are two steps to doing this:

    1. Get the user’s input and store it in the bynavn (in your code, it is just left uninitialized), and
    2. Send the user to a new webpage by changing the current page’s location. To the user, this seems almost the same as redirecting, however from a technical standpoint its a bit different: a redirect should give the user a 3xx HTTP response code, but changing the page’s location pretends that the user had typed the URL of the page into the browser. True redirects can only be done from the server, but the client-side webpage can freely change the location.

    To do that first step all you need to use is use document.getElementById() to get the input box, then access its .value property. The .value property contains the text that is currently in the input box.

    The second part is also really easy, even though the explanation is a bit much. Just change the href property of the global location object. It’s common to write it as window.location.href because to indicate that it is a global variable instead, but sometimes you’ll see it as just location.href too. This is OK because every global variable is a property on the window object.

    Using both of these steps you get this code:

    function submit() {
  var bynavn = document.getElementById('tekst');
  if (bynavn == "Vonsild") {
    location.href = "/lykkelig.htm"
  }
}
    <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <title>Niveau 5</title>
  <link href="/ZPWSODwhnzO!SJKAzmaPQ/style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>
  <div>
    <img src="hvorervihenne.png" width="1199" height="611" />
    <br> Hvor er vi?: <input type="text" id="tekst">
    <button onclick id="knap">Enter</button>
    <script src="/svar.js"></script>
  </div>
</body>

</html>

    Note that there as a few more general code improvements you can make:

    • You don’t want to change the location if the user gets the answer wrong, so you don’t need an else block at all unless you’re going to use it for something later.
    • Consider changing the bynavn variable to be full lowercase with .toLowerCase(), then only check it against lowercase strings. This will make the input case insensitive, which might be what you’re looking for.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search