CODEWITHSUNDEEP
javascripthtmlgetelementbyid
Connor
Connor

Reputation: 143

Difficulties with document.getElementById().value

I'm new to JS, and I'm trying to make a very simple program that will take an input and produce a relevant output. However, I'm doing something wrong, as it's not working. Here is my code. 

<html>
<head>
    <title>Test</title>
    <h1>Test</h1>
</head>
<body>
    <p>Please type your input into the box below.</p>
    <input type="number"; id="input">
    <button type="submit"; onclick="Output()">Submit</button>
    <pre id="OutputHere">Type an input first!</pre>
    <script type="text/javascript">
        window.onload = function {
            if(document.getElementById("input").boolValue != null); {
                Output();
            }
        }
         function Output() {
            var input = document.getElementById("input").value
            switch(input) {
                case 1:
                    document.getElementById("OutputHere").value="4"
                case 2: 
                     document.getElementById("OutputHere").value="9"

            }
        }

Upvotes: 2

Views: 1730

Answers (3)

zer00ne
zer00ne

Reputation: 43880

There were so many mistakes, I placed all the corrections in the CSS box. Each number of the list items corresponds to the location in the source.

SNIPPET

/* 4 */
function out() {
  var input = document.getElementById("input").value
  var output = document.getElementById('output'); //5

  switch (input) {
    case '1': // 6
      output.value = "4";
      break; // 7
    case '2': // 6
      output.value = "9";
      break; // 7
    default: // 8
      output.value = 'Enter 1 or 2';
      break;

  }
}
/*
1. Added max and min attributes since you are expecting a very limited range of input.
2. Removed the type='submit' which by default will gather all data from a <form>'s form elements with a name and then post(or get) to a server. Obviously you do not meet the requirements nor do you need it.
3. Changed <pre> to <output>. Not only is this element a semantically sound choice, it also accepts and displays values derived from the .value property and .textContent or .innerHTML (there's more properties that can be used, but those are the 3 major ones).
4. Removed window.onload event. In this case, it doesn't matter since loading is not crucial in such a simple design. Removed the validation because by using an input type='number' letters cannot be entered, and it should be in the function. BTW, I don't think there's a .boolValue property in JS.
5. Store the value of output in a variable to save you from carpal tunnel syndrome.
6. All element data is text even if it's 0 to 9. If you want them to be numbers (which you don't in this case), use Number(), parseInt(), or parseFloat() to convert a text string to number data. Since we haven't converted the strings to numbers we must wrap each value in quotes.
7. In switch() add break; at the end of each case statement. Without break; the input will go on to the next case, resulting in unexpected results.
8. The last case statement should be default:. Here you can enter a function/expression that applies to anything that is not 1 or 2. Using the default: this way functions as a validator/filter.
*/
<!doctype html>
<html>

<head>
  <title>Test</title>
  <h1>Test</h1>
</head>

<body>
  <p>Please type your input into the box below.</p>
  <!--1-->
  <input type="number" id="input" max='2' min='1'>
  <!--2-->
  <button onclick="out()">Submit</button>
  <!--3-->
  <output id="output"></output>

</body>

</html>

Upvotes: 2

Ionut Necula
Ionut Necula

Reputation: 11472

You are missing () from the onload function, change window.onload = function { to window.onload = function() {, also there should not be ; after input/button attributes, another mistake is the ; after the if statement if (document.getElementById("input").boolValue != null); { should be if (document.getElementById("input").boolValue != null) {, also there is no boolVal is just value. Change case 1, case 2 to case "1", case "2" as the input returned values are strings.

I suggest you really check your console errors to see these type of syntax mistakes.

You can also use addEventListener("click", yourFunction); over the deprecated not to be used anymore onclick.

And finnally, also change .value with innerHTML for the output:

window.onload = function() {
  if (document.getElementById("input").value != null) {
    Output();
  }
};

function Output() {
  var input = document.getElementById("input").value;
  switch (input) {
    case "1":
      document.getElementById("OutputHere").innerHTML= "4";
      break;
    case "2":
      document.getElementById("OutputHere").innerHTML= "9";
      break;
  }
}
<p>Please type your input into the box below.</p>
<input type="number" id="input">
<button type="submit" onclick="Output()">Submit</button>
<pre id="OutputHere">Type an input first!</pre>

Upvotes: 2

spencer.sm
spencer.sm

Reputation: 20526

I agree with the problems that the other answers pointed out. I also would suggest using addEventListener in your JavaScript instead of setting the onclick tag in your HTML.

If it helps, I've restructured your code a bit below.

var button = document.getElementById('submit');
var input = document.getElementById('input');

button.addEventListener("click", Output);

function Output() {
  var value = document.getElementById("input").value;
  var pre = document.getElementById("OutputHere");

  switch(value){
    case "1":
      pre.innerText = "4";
      break;
    case "2":
      pre.innerText = "9";
      break;
    default:
      pre.innerText = "Default text";
      break;
  }
}
<p>Please type your input into the box below.</p>
<input type="number" id="input">
<button id="submit">Submit</button>
<pre id="OutputHere">Type an input first!</pre>

Upvotes: 1

Related Questions