www.webdeveloper.com
Results 1 to 6 of 6

Thread: Get input on webpage. Without form or prompt.

  1. #1
    Join Date
    Feb 2013
    Posts
    19

    Get input on webpage. Without form or prompt.

    Hey I'm learning javasript and making a text game and I have a question. I used to program qbasic. In qbasic to get input you write INPUT "WHAT IS YOUR NAME", NAME$. Where name$ is the variable it saves the input as. Is there anything like this in javascript. Where it just has like a blinking command line cursor on the webpage where the user types input and it saves it as a variable. I'm not looking to use prompt or a form.

    Also, getting more advanced here. How would you get input while running other code. To where the user can enter input at the blinking cursor but mean while its looping running other code. Thanks in advance.

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    you can use the <input id="here goes a unique id for the current page" type="text" value="" /> element, also know as 'textfield'. the typed data can be grabbed from this element on various events (onfocus|onblur|onkeyup|onkeydown|onchange|onmouseover|onmouseout, etc.). to get the data you can reference this element like document.getElementById('here goes the id attribute value').value

  3. #3
    Join Date
    Feb 2013
    Posts
    19
    Could you elaborate more. Maybe edit this code that I have for my game and show me how you would do this (The best way). Also, it would be better if the script and html looped while waiting for the input. Like a typical game loop. So it can do other things while checking for input. It seems like the best way would be to do it from within the script tags in javascript and not use html. But I don't really understand how. Anyway, heres what I got for my game. Don't laugh, this is how I'm used to learning.

    <HTML>
    <HEAD>
    <TITLE> Legend of the Godstone </TITLE>
    <BODY>
    <DIV STYLE = "WIDTH : 900px; HEIGHT:50px; margin: auto;">
    <H1 align = "center">LEGEND OF THE DRAGON STONE</H1>

    </DIV>
    <DIV STYLE = "margin-top : 5px; margin-left : 100px; WIDTH:1300px; HEIGHT:600px; border : 1px solid black;">

    <script>
    document.write ('<p>"Welcome. Enter your first name."</p>');
    </script>




    </DIV>

    </BODY>

    </HTML>

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    my english is not good, but i hope the comments are readable

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Legend of the Godstone</title>
    <style type="text/css">
    /* inline styles and inline scripts are not good, so we'll use stylesheet and place the script in the head section also */
    b.uu{text-decoration:underline;}
    p.txt{text-align:left;text-indent:10px;display:none;}
    span.u_name{font-weight:bold;color:Crimson;}
    #header{width:900px;height:50px;margin:auto;}
    #content{padding:10px 10px;margin-top:5px;margin-left:100px;width:1300px;height:600px;border:1px solid black;}
    #ok,#chk{cursor:pointer;}
    #fname{text-align:center;}
    </style>
    <script type="text/javascript">
    /* this var will store the entered name and you can use it as many times 
    as you want until the page is reloaded. to store the entered value longer you 
    have to use cookies or database. also you can pass the entered name to other 
    pages through the URL, but it will be lost at the next session */
    var username='';
    /* this is the rule for the username - it may have only letters,digits,underscore 
    and be from 3 to 10 symbols in length */
    var mask=/[A-Za-z_0-9]{3,10}/g;
    
    function showContent(val){
    /* this stops executing if the username var is still empty */
    if(username===''){return;}
    /* if the username is not empty we first hide the textfield */
    document.getElementById('introduce').style.display='none';
    /* this is the collection of all elements of the current document (our page) having class "u_name". this is an array */
    var user_spans=document.getElementsByClassName('u_name');
    /* this is the collection of all elements of the current document (our page) having class "txt". this is an array too */
    var pp=document.getElementsByClassName('txt');
    /* the first loop writes the username in every span having class "u_name" */
    for(var i=0; i<user_spans.length; i++){user_spans[i].innerHTML=username;}
    /* the second loop makes visible every paragraph having class "txt" */
    for(var x=0; x<pp.length; x++){pp[x].style.display='block';}
    }
    
    function winOnLoad(){
    /* this makes the text field focused */
    document.getElementById('fname').focus();
    /* this will happen when the user click the "OK" button */
    document.getElementById('ok').onclick=function(){
    /* this is the short reference for the text field */
    var inp=document.getElementById('fname');
    /* if the entered data matches the rule for the username 
    we store it in the var username and pass the username as 
    an argument to the showContent function*/
    if(mask.test(inp.value)){username=inp.value;showContent(username);}
    /* otherwise we erase incorrect data from the text field, make it focused 
    and stop the winOnLoad function from futher executing */
    else{inp.value='';inp.focus();return;}
    }
    /* this will happen if the user click on the "this button" button */
    document.getElementById('chk').onclick=function(){alert('var username = "'+username+'"');}
    }
    /* this makes the winOnLoad function to be executed when the page is fully loaded*/
    window.onload=winOnLoad;
    </script>
    </head>
    <body>
    <div id="header"><h1 align="center">LEGEND OF THE DRAGON STONE</h1></div>
    <div id="content">
    <div id="introduce">Welcome. Enter your first name <input type="text" id="fname" value="" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" id="ok" value="OK" /></div>
    <p class="txt">Dear <span class="u_name"></span>! We glad to see you here and hope that you will enjoy the game!</p>
    <p class="txt">You stated that your name is <span class="u_name"></span>. Now we can check to see if your name has just been stored in the <b class="uu">username</b> variable.</p>
    <p class="txt">Click <input type="button" id="chk" value="this button" /> to check it up, <span class="u_name"></span>.</p>
    </div>
    </body>
    </html>

  5. #5
    Join Date
    Feb 2013
    Posts
    19
    That was helpful. Now I am trying something myself. But I can't understand what is wrong with my code. Could you help me? I'm trying to do it with jquery now.

    <html>

    <head>
    <title> Legend of the Dragonstone </title>
    <head>

    <body>

    <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>

    <script>


    $(document.ready(function() {

    document.write("<p>Please enter your name.</p>");

    $("#button").click(function(){

    var name = document.getElementById("text");

    document.write("Welcome" + name +".");

    });

    });

    </script>

    <input type="text" id="text">
    <input type="button" id = "button">

    </body>
    </html>

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,672
    be focused and think what you are writting when composing the code, there is no need to hurry. pay good attention on correct syntax whether it's jquery or pure javascript or html or else, because this is very important:

    incorrect $(document.ready(function(){...});
    correct $(document).ready(function(){...});

    do NOT use document.write() AFTER the current document is fully loaded. since .ready(handler) specifies a function to execute when the DOM is fully loaded, using of document.write() destroys everything.

    use the appropriate syntax. jquery's slogan is 'write less, do more', so follow this idea when composing the code.

    incorrect var name = document.getElementById("text");
    correct var name = $("#text").val();

    p.s. and plz read my signature
    Last edited by Padonak; 06-10-2013 at 09:03 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles