Gewusst wie: speichern einer Benutzereingabe einer Variablen in html und js

mache ich ein Spiel und am Anfang fragt er nach Ihrem Namen. Ich will diesen Namen gespeichert werden als Variable. ich habe diesen html-code:

<form id="form" onsubmit="return false;">
<input   style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput">
<input   style=position:absolute;top:50%;left:5%;width:40%; type="submit"    onclick="name()">
</form>

und dies ist der javascript-Teil:

function name()
{
var input = document.getElementById("userInput");
alert(input);
}
  • Ändern Sie einfach Ihre Funktionsnamen etwas wie username weil in JavaScript name ist ein reserviertes Wort.
InformationsquelleAutor Hamzah Malik | 2013-07-02
  1. 18

    Es funktioniert nicht, weil name ist ein reserviertes Wort in JavaScript. Ändern Sie den Namen der Funktion, um etwas anderes.

    Sehen http://www.quackit.com/javascript/javascript_reserved_words.cfm

    <form id="form" onsubmit="return false;">
    <input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" />
    <input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" />
</form>

function othername() {
    var input = document.getElementById("userInput").value;
    alert(input);
}
    InformationsquelleAutor PiLHA
  2. 7

    Erstens, stellen Sie Ihr markup mehr tragbar/wiederverwendbar. Ich auch, legen Sie die Schaltfläche type, um 'button' anstatt die onsubmit Attribut. Sie können Umschalten, die type Attribut submit wenn das Formular muss zur Interaktion mit einem server.

    <div class='wrapper'>
<form id='nameForm'>
<div class='form-uname'>
    <label id='nameLable' for='nameField'>Create a username:</label>
    <input id='nameField' type='text' maxlength='25'></input>
</div>
<div class='form-sub'>
    <button id='subButton' type='button'>Print your name!</button>
</div>
</form>

<div>
    <p id='result'></p></div>
</div>

    Nächsten schreiben Sie eine Allgemeine Funktion für das Auslesen der Benutzernamen in einer Variablen. Es wird geprüft, ob die variable halten den Benutzernamen hat es mindestens drei Zeichen. Sie können dies ändern, um eine beliebige Konstante, die Sie wollen.

    function getUserName() {
var nameField = document.getElementById('nameField').value;
var result = document.getElementById('result');

if (nameField.length < 3) {
    result.textContent = 'Username must contain at least 3 characters';
    //alert('Username must contain at least 3 characters');
} else {
    result.textContent = 'Your username is: ' + nameField;
    //alert(nameField);
}
}

    Nächster, ich habe einen Ereignis-listener für den button. Es ist im Allgemeinen als schlechte Praxis, haben inline-js-Aufrufe.

    var subButton = document.getElementById('subButton');
subButton.addEventListener('click', getUserName, false);

    Hier ist eine funktionierende und leicht gestylt demo:

    CodePen-demo von dieser Antwort.

    InformationsquelleAutor NickersF
  3. 1

    Ändern Sie Ihr javascript um:

    var input = document.getElementById('userInput').value;

    Diese erhalten die Wert-Typen in das Textfeld ein, nicht einen DOM-Objekt

    • ich habe versucht, und es scheint nicht zu funktionieren. von dem, was ive Lesen, sollte es aber..
    • ich behoben haben! es scheint so offensichtlich jetzt. es stellt sich heraus, dass die Funktion nicht funktionieren mit der Funktion Namen wie "name()" nach der änderung auf "Benutzername()" funktioniert es einwandfrei!!!
    InformationsquelleAutor Tom G
  4. 1

    Wie ich auf PHP und JavaScript:

    <input type="hidden" id="CatId" value="<?php echo $categoryId; ?>">

    Update der JavaScript:

    var categoryId = document.getElementById('CatId').value;
    InformationsquelleAutor Amranur Rahman
  5. 0

    Ich fand dies funktioniert am besten für mich
    https://jsfiddle.net/Lu92akv6/ [Ich fand diese für mich arbeiten, versuchen Sie, diese Geige][1]

    JS:

    document.getElementById("btnmyNumber").addEventListener("click", myFunctionVar);
function myFunctionVar() {
  var numberr = parseInt(document.getElementById("myNumber").value, 10);
  //alert(numberr);
  if ( numberr > 1) {

    document.getElementById("minusE5").style.display = "none";



}}

    HTML:

       <form onsubmit="return false;">
       <input class="button button3" type="number" id="myNumber" value="" min="0" max="30">
       <input type="submit" id="btnmyNumber">

       </form>

    InformationsquelleAutor Joshua
Schreibe einen Kommentar