Question

我是JavaScript的新手，我需要在一个html页面中使用字符串方法。我需要确保用户输入数据，但我无法让我的函数调用工作。任何的想法？我完成了所有这些，但只是为了确保一个按钮提交可以完美地验证所有字符串方法功能。

这是我的HTML代码：

<!DOCTYPE html>
  <html>
    <head>
        <meta charset ="utf-8"/>
        <h1> Try 1</h1>
      <p>Please enter all the field below.</p>
    </head>
      <body>
        <form id="myForm">
          <fieldset>
            <legend>String Methods</legend>

              <p>Using concat()</p>
              <input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
              <input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>

              <p>Using substr()</p>
              <input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>

              <p>Using lastIndexOf()</p>
              <input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
              <input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>

              <p>Using toLowerCase()</p>
              <input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>

              <p>Using toUpperCase()</p>
              <input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>

              <p>Using match()</p>
              <input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
              <input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>

              <p>Using replace()</p>
              <p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
              <input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
              <input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>

              <p>Using split()</p>
              <input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>

              <p>Using charCodeAt()</p>
              <input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>

              <p>Using slice()</p>
              <input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>

              <input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
          </fieldset>

          </form>
          <div id="answers"></div>
          </body>
         </html>

这是我的JavaScript代码：

   <script>
          function validateEverything(){
            var wo1 = document.getElementById("word1").value;
            var wo2 = document.getElementById("word2").value;

            var sub = document.getElementById("subtr").value;

            var lin = document.getElementById("lastindex").value;
            var sea = document.getElementById("srch").value;

            var lca = document.getElementById("lcase").value;
            var uca = document.getElementById("ucase").value;

            var mat = document.getElementById("match").value;
            var ma1 = document.getElementById("match1").value;

            var phr = document.getElementById("phrase").value;
            var rep = document.getElementById("replce").value;
            var re1 = document.getElementById("replce1").value;

            var ph1 = document.getElementById("phrase1").value;
            var spl = document.getElementById("splt").value;

            var cha = document.getElementById("cca").value;

            var slc = document.getElementById("slce").value;

            var ans = document.getElementById("answers");

            //Concat
            var con = wo1.concat(" "+wo2);

            //Subtr
            var subr = sub.substring(1, 7);

            //lastindexof
            var n = lin.lastIndexOf(sea);

            //toLowerCase
            var lc = lca.toLowerCase();

            //toUpperCase
            var uc = uca.toUpperCase();

            //match
            var mc = mat.match(ma1);

            //replace
            var rp = phr.replace(replce, replce1);

            //split
            var sp = sp1.split(" ")

            //charCodeAt
            var cc = cha.charCodeAt(0);

            //slice
            var sl = slc.slice(1, 5);

            show();
          }

          function show(){
            ans.innerHTML = answersHTML();
          }
            //answers
            function answersHTML(){
            var ans = document.getElementById("answers").innerHTML;
            document.write(con);
            document.write(subr);
            document.write(n);
            document.write(lc);
            document.write(uc);
            document.write(mc);
            document.write(rp);
            document.write(sp);
            document.write(cc);
            document.write(sl);

          }
        </script>

Answer 1

您的代码段中存在多个问题。在某些情况下，不存在DOM元素，但您仍在执行document.getElementById（）;

answerHTML如何了解con,sub,....？它们是validateEverything功能和放大器的本地功能。你没有将它传递给answerHTML函数

您正在使用input type = "submit"。您需要使用event.preventDefault()来停止提交。你没有提交任何东西。而是使用input type = "button"

也没有使用show()功能

每次使用document.write时，它都会删除以前写过的内容。相反，字符串concatenation和innerHTML会没问题。这是一个包含最少代码的工作代码段。

<强> JS

function validateEverything(event){
          event.preventDefault();
            var wo1 = document.getElementById("word1").value;
            var wo2 = document.getElementById("word2").value;
            var sub = document.getElementById("subtr").value;
            var ans = document.getElementById("answers");
            //Concat
            var con = wo1.concat(" "+wo2);
            //Subtr
            var subr = sub.substring(1, 7);

      ans.innerHTML = con+" "+subr;
          }

<强> HTML

<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">

JSFIDDLE

调用函数

1 个答案: