Question

我已经了解了js，html和CSS的基础知识。为了挑战自我，我想组建一个组织者（特别是游戏任务）。到目前为止，我已经设法创建了一个可以输入的输入框，当您按下Enter键时，输入框就消失了。我正在逐步进行此操作，因此我可以了解自己在做什么。我想知道的是如何获得输入（在输入内容后按回车键）以将其打印出来，目前什么地方都可以。我还想知道如何在其上使用CSS（毕竟，我正在使用js函数来打印它，而我不知道如何在js上使用CSS）。

    <!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>

感谢任何愿意帮助我的人（请记住，我仍处于学习不足状态，'getElementById'让我几乎不知所措）

P.S。，如果您对如何使此代码更小或更佳有任何建议，请务必告知。

Answer 1

您可以通过

获得元素的值

document.getElementById('inputId').value

Answer 2

无需为此使用表格。您可以简单地使用onKeyUp事件来处理回车键。 Enter键的代码为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>

Answer 3

您可以通过执行以下操作获取表单的输入：

<!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>

Answer 4

<!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>

我知道我的回答有点过头了，但是我想展示一些使用函数的例子并说明范围的概念。为了学习编程，我强烈建议您熟悉范围的概念。

P.S。较短的代码不一定意味着较好的代码。我个人更喜欢可读的代码，因为我不想花几个月的时间解码“聪明”的代码，如果我需要对其进行编辑。

P.S.S我认为您在学习编码方面正处于正确的轨道上。仅考虑酷功能并尝试实现它们就是学习的好方法。当您陷入困境时，Google和问问题是您最好的朋友。永远不要害怕问一个“愚蠢”的问题。最后，如果您想继续学习HTML和JavaScript，我建议您学习一个名为jQuery的库，它具有许多很酷的功能，这些功能可能会使您的某些任务变得更容易。熟悉编码之后，我建议学习一些类似Angular的框架。

我正在学习编码，有人可以告诉我哪里错了吗？

4 个答案: