2016-03-28 80 views
0

我是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> 
+1

你在哪裏卡住了?控制檯上的任何錯誤? – gurvinder372

+0

您需要在'$(function(){.. validation code ...})'或文檔就緒函數中編寫驗證函數 – Apb

+0

@Apb jQuery不在標籤中。只有javascript –

回答

0

,我們在您snippet.In某些情況下,多個問題沒有DOM元素存在,但仍然您正在做document.getElementById();

另外如何answerHTML將知道關於con,sub,....?他們是本地的validateEverything功能&

您正在使用input type = "submit"你不把它傳遞給answerHTML功能。您需要使用event.preventDefault()來停止提交。你沒有提交任何東西。而是使用input type = "button"

也沒有用show()功能

每當你使用document.write的,所以它會刪除其以前寫過什麼。相反,字符串concatenationinnerHTML會很好。 這是一個帶有最小代碼的工作片段。

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