CODEWITHSUNDEEP
javascripthtmlcss
Braden Foltz
Braden Foltz

Reputation: 127

I am learning to code, can someone please tell me what is wrong?

I have learned the basics of js, html, and CSS. To challenge myself, I wanted to make an organizer (specifically for quests of a game). So far I have managed to create an input box that you can type in, it goes away when you hit enter, and that is about it. I am taking this step by step, so I can learn what I am doing. What I want to know is how I get my input (hitting enter after typing something in) to be printed out, for now just anywhere. I would also like to know how to use CSS on it (after all, I am using a js function to print it, and I do not know how to use CSS on js). 

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <!--This is my javascript-->
        <script language="javascript">

            //adds arc name to page
            function arcName(){
                var arc = document.getElementById("arcs");
            }
        </script>

        <!--Style (how everything looks, not much yet)-->
        <style>
            body{
                background-color:darkgray;
            }
        </style>
    </head>
    <body>
        <!--This is my input-->

        <form autocomplete="off" id="arcs" oninput="arcName">
            Arc: <input name= "Arc name" type="text" size="20"/>
            <input type="submit" style="display: none"/>
        </form>
        <script language="javascript">
            document.write(arc);
        </script>
    </body>
</html>

Thank you for anyone who is willing to help me (please remember that I am still at low learning, I was almost overwhelmed by 'getElementById.')

P.S., if you have any tips on how to make this code smaller or better, please do tell.

Upvotes: 0

Views: 90

Answers (4)

Gordan Lin
Gordan Lin

Reputation: 37

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--Style (how everything looks, not much yet)-->
        <style>
            body{
                background-color:darkgray;
            }
        </style>

        <!--This is my javascript-->
        <script language="javascript">
            //function for getting the user input and returning its value
            getArcInput = function () {
                // retrieves the text from the input box and setting it to
                // userInput variable
                var userInput = document.getElementById("arcsInput").value;
                // return the userInput to the function that calls it
                return userInput;
            };
            // function for setting text within the paragraph tag to arc
            displayArcInput = function (displayValue) {
                document.getElementById("display").innerHTML = displayValue;
            }

            submitFunction = function () {
               // calls the getArcInput function to retrieve the user input
               // and sets arc to equal the user input.
               var arc = getArcInput();
               // gives arc to displayArcInput function, so that it shows up 
               // on the page
               displayArcInput(arc);
            };

        </script>
    </head>
    <body>
        <!--The oninput is an event that calls the submitFunction 
            when the input box gets user input-->
        <input id="arcsInput" name="arcName" type="text" size="20" 
               oninput="submitFunction()"/>
        <!--this paragraph tag is used to display the input-->
        <p id="display"></p>
    </body>
</html>

I know my answer is a bit overkill, but I wanted to show examples of using functions and kind of demonstrate the concept of scope. For learning how to program, I strongly recommend getting comfortable with the concept of scope.

P.S. Shorter code doesn't necessarily mean better code. I personally prefer readable code because I don't want to spend time decoding "clever" coding a few months later if I need to edit it.

P.S.S I think you are on the right track for learning how to code. Just thinking of cool functionalities and trying to implement them is a great way to learn. When you get stuck, Google and asking questions are your best friend. Don't ever be afraid of asking a "dumb" question. And finally, if you want to continue learning HTML and JavaScript, I recommend learning about a library called jQuery, it has a lot of cool functions that might make some of your task easier. After getting comfortable with coding, I recommend learning some framework like Angular.

Upvotes: 0

marshall legend
marshall legend

Reputation: 544

You can get the input of your form by doing the following:

<!DOCTYPE html>
<html>
<body>

<form id="myForm" action="/action_page.php">
  First name: <input type="text" name="fname" value="Marshall"><br>
</form> 

<p>Click the "Try it" button to display the value of the first element in the form.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myForm").elements[0].value;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

Upvotes: 0

Hari Das
Hari Das

Reputation: 10864

No need to use a form for this. You can simply use the onKeyUp event to handle the enter key. The code for enter key is 13.

function printName(event){
  var char = event.which || event.keyCode;
  if(char==13){
    //console.log(document.getElementById("arcName").value);
    document.getElementById("displayNames").innerHTML += document.getElementById("arcName").value + "<br/>";
    document.getElementById("arcName").value = "";
  }
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!--Style (how everything looks, not much yet)-->
        <style>
            body{
                background-color:darkgray;
            }
            #arcName{
              background: yellow;
            }
        </style>
    </head>
    <body>
        <!--This is my input-->
        <input name= "Arc name" id="arcName" onKeyUp="printName(event)" type="text" size="20"/>
        <div id="displayNames"></div>
    </body>
</html>

Upvotes: 1

Jjagwe Dennis
Jjagwe Dennis

Reputation: 1863

You can get the value of the element by 

document.getElementById('inputId').value

Upvotes: 1

Related Questions