JavaScript不显示编译的文本

时间:2014-11-19 23:32:34

标签: javascript html

我试图整理一个小脚本来保存我们在办公室重复输入的一些内容。基本上这个想法是你选择几个选项,然后页面显示一个段落,在不同的地方插入一些选定的自定义文本。

无论如何,这就是我所拥有的,而且它不起作用。我尝试在JavaScript中添加一些console.logs,但他们没有做任何事情。为什么呢?

  <!DOCTYPE html>
  <html>
  <head>
  <script>

    function write() {
        var name1 = document.getElementById("firstname");
        var name = name1.options[name1.selectedIndex].text;
        var gender1 = document.getElementById("gender");
        var gender = gender1.options[gender1.selectedIndex].text;
        var authentication1 = document.getElementById("authentication");
        var name = authentication1.options[authentication1.selectedIndex].text;

    var answer = name + gender + authentication; // There will be some other text added in here           eventually

    document.getElementById("text").innerHTML += answer;
        }

    </script>
    </head>
    <body>
    <form>
    <input type="text" name="firstname" placeholder="Name"><br /><br />

    <select name="gender">
    <option value="his">His</option>
    <option value="her">Her</option>
    </select><br /><br />

    <select name="authentication">
    <option value="questions">security questions</option>
    <option value="firstyear">first year attended</option>
    <option value="birthday">birthday and mailing address</option>
    </select><br /><br />

    <input type="submit" value="Submit" onClick="write(); return false;">
    </form>

    <h2 id="text"></h2>

    </body>
    </html>

1 个答案:

答案 0 :(得分:1)

写是一种文档方法。它永远不会工作,它只会画一个空白页

function writeThis() {
   var name = document.forms[0].firstname.value;
   var gender = document.forms[0].gender.options[document.forms[0].gender.selectedIndex].text;
   var authentication = document.forms[0].authentication.options[document.forms[0].authentication.selectedIndex].text;
   document.getElementById("text").innerHTML += (name + "  " + gender + "  " + authentication);
}

我将您的功能重命名为writeThis(),因此请务必使用html:

<input type="submit" value="Submit" onClick="writeThis();return false">

此外,新功能将向您展示如何获取值。以您学习如何操作的方式进行检查。最后,如果您始终关闭html代码<input />而不是<input>,那么这是一种更好的做法。

小提琴:http://jsfiddle.net/xr7vqsfm/4/