CODEWITHSUNDEEP
javascript
Michael Jones
Michael Jones

Reputation: 1

Using get element by ID for user input

I am trying to code this web app to have the user input important information about their device, then place it in the relevant spots in javascript. Here is my code so far.

<script type="text/javascript">
        function update() {
            var key = document.getElementById("key").value;
            if (input.length < 40) {
                alert("Please enter a valid input");
                return;
            }
           document.getElementById("access key").innerHTML;
        }
</script>
<script type="text/javascript">
    function update() {
        var device_id = document.getElementById("device_id").value;
        if (input.length < 24) {
            alert("please enter a valit input");
            return;
        }
        document.getElementById("device_id").innerHTML;
    }

    </script>
<p><input type="text" id="key" autofocus placeholder = "Enter product key here" /></p>
<p><input type="text" id="device_id" autofocus placeholder = "Enter device ID here" /></p>
<p><input type="submit" value="Submit" onclick="update()"/></p>


   <h1>Rotary Gate Systems</h1>



    <article>
        <a href="#" class="button open_button">Open</a>
    </article>
    <article>
        <a href="#" class="button close_button">Close</a>
    </article>

    <article>
        <p class="status_closed status_button">CLOSED</p>
        <p class="status_open status_button">OPEN</p>
        <p class="status_none status_button">NO CONNECTION</p>
    </article>



    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
    <script>/*jslint browser: true*/
/*global $, jQuery*/
/*jshint strict: true */

/*EDIT THESE VARIABLES*/
//key is the same as your 'access token'
var key = "key"

//device_id is the same as the 'core id'
var device_id = "device_id"

I think I may be missing something in the submit button, or what I'm trying to do may not be possible with this attribute. Can someone take a look at this and let me know where I may be messing up?

Upvotes: 0

Views: 54

Answers (2)

Thriggle
Thriggle

Reputation: 7059

Based on your comments, it sounds like you're trying to update the key and device_id variables with the values from the two <input> elements.

You should learn about variable scope in JavaScript to be sure you can access those variables.

If the key and device_id variables are in scope when your function runs, you can just assign them values directly. Don't precede the assignments with the var keyword, or you'll be defining new locally-scoped variables instead of updating the existing variables from the outer scope.

You also cannot have two functions with the same name (in this case, update) defined within the same scope; only the most recently defined function will work.

var key = "key";
var device_id = "device_id";

function update() {
  var tempkey = document.getElementById("key").value;
  if (tempkey.length < 40) {
    alert("Please enter a valid key.");
    return;
  }else{
    key = tempkey;
  }
  tempdevice_id = document.getElementById("device_id ").value;
  if (tempdevice_id.length < 24) {
    alert("please enter a valid device ID.");
    return;
  }else{
    device_id = tempdevice_id;
  }
}
<p>
  <input type="text" id="key" autofocus placeholder="Enter product key here" />
</p>
<p>
  <input type="text" id="device_id" autofocus placeholder="Enter device ID here" />
</p>
<p>
  <input type="submit" value="Submit" onclick="update()" />
</p>
<h1>Rotary Gate Systems</h1>
<article>
  <a href="#" class="button open_button">Open</a>
</article>
<article>
  <a href="#" class="button close_button">Close</a>
</article>
<article>
  <p class="status_closed status_button">CLOSED</p>
  <p class="status_open status_button">OPEN</p>
  <p class="status_none status_button">NO CONNECTION</p>
</article>

Upvotes: 0

stark
stark

Reputation: 2256

You need to change your conditional statements to,

if (key.length < 40) {

and

if (device_id.length < 40) {

since input is not defined inside your update() functions.

And additionally, you should consider combining the two update() functions into one so as to conduct the validity checks on key and device_id together whenever the form is submitted.

Upvotes: 1

Related Questions