JavaScript for getting value from html select and link to button-CodePudding

var gch;
document.addEventListener('DOMcontentLoaded', Function()) {
  gch = document.getElementById('choose');

  if (localStorage['choose']) {
    gch = input;
  }
  input.onchange = function() {
    gch = this.value;
  }
}

function Visit() {
  if (gch == 1) {
    window.location = "index.html";
  } else if (gch == 2) {
    window.location = "input.html";
  }
}

<select  id='choose' aria-label="Default select example">
  <option selected>Choose an Action:</option>
  <option value="1">ADD Patient</option>
  <option value="2">Delete Patient</option>
</select>

<button onclick="Visit()">go</button>

I wanted to create a drop-down menu with “Add Patient Name” and “Delete Patient Name" as options and a “Go!” button to go to the corresponding page from the home. I was really new to js, kind of still using java logic to write js, cant figure out whats wrong

CodePudding user response：

You had a bunch of syntax errors and typos.

DOMcontentLoaded should have an uppercase C.

Function should have a lowercase f.

The closing parenthesis in the addEventListener call should be after the function body.

You assigned gch to the <select> element, when it should be input.

I'm not sure what you're trying to do with localStorage, and localStorage can't be used in Stack Snippets because of its sandboxing, so I left that out. I suspect what you want is gch = localStorage.getItem("choose");

var gch;
document.addEventListener('DOMContentLoaded', function() {
  var input = document.getElementById('choose');

  input.onchange = function() {
    gch = this.value;
  }
})

function Visit() {
  if (gch == 1) {
    window.location = "index.html";
  } else if (gch == 2) {
    window.location = "input.html";
  }
}

<select  id='choose' aria-label="Default select example">
  <option selected>Choose an Action:</option>
  <option value="1">ADD Patient</option>
  <option value="2">Delete Patient</option>
</select>

<button onclick="Visit()">go</button>

CodePudding user response：

You can also do that...

document
.addEventListener( 'DOMContentLoaded', () =>
  {
  const 
    inChoose = document.getElementById('choose')
  , gch =
    { add : 'index.html' 
    , del : 'input.html'
    }
  document
  .getElementById('bt-go')
  .onclick = () =>
    {
    if (gch[inChoose.value])
      window.location = gch[inChoose.value]
    }
  })

<select  id='choose' aria-label="Default select example">
  <option selected>Choose an Action:</option>
  <option value="add">ADD Patient</option>
  <option value="del">Delete Patient</option>
</select>

<button id="bt-go">go</button>

CodePudding user response：

There was some error and syntax error in document.addEventListener and function inside document.addEventListener.

Try this:

let gch;
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('choose');
    input.onchange = function () {
        gch = this.value;
    }
})
function Visit() {
    if (gch == 1) {
        console.log("Uncomment below line to redirect to index.html");
        // window.location = "index.html";
    } else if (gch == 2) {
        console.log("Uncomment below line to redirect to input.html");
        // window.location = "input.html";
    }
}

<select  id='choose' aria-label="Default select example">
    <option selected>Choose an Action:</option>
    <option value="1">ADD Patient</option>
    <option value="2">Delete Patient</option>
</select>
<button onclick="Visit()">go</button>