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

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'让我几乎不知所措。）

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

Answer 1

您可以通过以下方式获取元素的值

document.getElementById('inputId').value

Answer 2

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

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

PS较短的代码不一定意味着更好的代码。 我个人更喜欢可读的代码，因为如果要编辑它，几个月后我不想花时间解码“聪明”的代码。

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

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

问题描述

4 个解决方案

解决方案1
1 2018-07-19 16:26:47

解决方案2
1 2018-07-19 16:34:03

解决方案3
0 2018-07-19 16:54:04

解决方案4
0 2018-07-19 17:22:50

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

问题描述

4 个解决方案

解决方案1 1 2018-07-19 16:26:47

解决方案2 1 2018-07-19 16:34:03

解决方案3 0 2018-07-19 16:54:04

解决方案4 0 2018-07-19 17:22:50

解决方案1
1 2018-07-19 16:26:47

解决方案2
1 2018-07-19 16:34:03

解决方案3
0 2018-07-19 16:54:04

解决方案4
0 2018-07-19 17:22:50