別のjsファイルから関数を呼び出してテキストをhtmlページに挿入する方法

-1

私は半単純な問題があります。入力欄に名前を入力するようにユーザーに指示する必要があります。名前を入力すると、ページはHello [ユーザー名]という別のページに切り替わり、コンテンツも表示されます。ここでは、今別のjsファイルから関数を呼び出してテキストをhtmlページに挿入する方法

function menuPage() { 

    var firstName = document.getElementById("firstName").value; 

    if (firstName.trim() && firstName != "") { 
     document.getElementById("username").innerHTML = firstName; 
     window.location.replace("menu.html") 
    } else { 
     alert("Please put in your first name.") 
    } 
}

：付随するJavaScriptファイル（name.js）ここで

<body> 
    <form id="myForm" name="myForm"> 
     <table class="input"> 
      <tr> 
       <label> 
        <h1>Enter your firstname:</h1> 
       </label> 
       <td> 
        <input type="text" id="firstName" class="form-control" autofocus> 
       </td> 
       <td> 
        <input type="button" value="Submit" onclick="menuPage();" class="btn btn-primary btn-lg"> 
       </td> 
      </tr> 
      <tr> 
       <td id="username"> 
       </td> 
      </tr> 
     </table> 
    </form> 
    <script src="name.js"></script> 
    <script src="ie10-viewport-bug-workaround.js"></script> 
</body>

されています。ここでは

は、最初の名前を尋ねる私の最初のhtmlファイル（名.html）でありますユーザが名前を入力すると表示される新しいhtmlページ（menu.html）です：

<div class="jumbotron"> 
    <div class="container"> 
     <div> 
      <h1 class="display-3">Hello!</h1> 
      <h1 id="username"></h1> 
      <p>This is your weekly meal to cook! Enjoy!!</p> 
      </p> 
      <h2 class="quote"><span class="words"></span></h2> 
      <button class="btn btn-success btn-sm" value="Press Me to get your Weekly Menu">Change Meal</button> 
     </div> 
    </div> 
</div> 
<script src="name.js"></script> 
<script src="menu.js"></script>

最後に、付属のJSファイル（menu.js）：

$(document).ready(function() { 

    weeklyMenu(); 

    function weeklyMenu() { 

     var menu = ["meatloaf", "albondigas", "enchiladas", "lasgna", "chicken, mash potatoes, mac & cheese", "turkey burgers, sweet potatoes fries", "stuffed peppers", "french soup"]; 

     var randomMenu = menu[Math.floor(Math.random() * menu.length)]; 
     var splitMenu = randomMenu.split(); 
     $('.words').text(splitMenu[0]); 
    } 

    $("button").on("click", function() { 

     weeklyMenu(); 

    }); 
});

出典

2016-07-03 Delante Lee Bess

クライアントに関するすべての情報が失われます。それを行う1つの方法は、情報を輸送するために[クエステルリング]（https://nl.wikipedia.org/wiki/Querystring）を使用することです。安全のためには、あなたは[encode]する必要があります（http://stackoverflow.com/questions/597028/how-can-encode-a-query-string-so-that-it-is-the-value-of-another- query-string-in）です。他のページでは、[読み込み]（https://gomakethings.com/how-to-get-the-value-of-a-querystring-with-native-javascript/）を実行し、[page load]の間にクエリ文字列をデコードします。（http://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load）。 –

あなたのmenu.htmlをちょっと修正しました。入力名をストレージ（Cookie、ローカルストレージまたはセッションストレージ）に保存する必要があります。しくみはこうだ：

menu.html

<div class="container"> 
    <div> 
     <h1 class="display-3">Hello, <span id="username"></span>!</h1> 
     <p>This is your weekly meal to cook! Enjoy!!</p> 
    </p> 
    <h2 class="quote"><span class="words"></span></h2> 
    <button class="btn btn-success btn-sm" value="Press Me to get your Weekly Menu">Change Meal</button> 
</div>

name.js

function menuPage() { 

var firstName = document.getElementById("firstName").value; 
if (firstName.trim() && firstName != "") { 
    localStorage.setItem("storageName",firstName); 
    document.getElementById("username").innerHTML = firstName; 
    window.location.replace("menu.html") 
} else { 
    alert("Please put in your first name.") 
} 
}

メニュー。JS

$(document).ready(function() { 
window.onload = $('#username').html(localStorage.getItem("storageName")); 

weeklyMenu(); 
function weeklyMenu() { 

    var menu = ["meatloaf", "albondigas", "enchiladas", "lasgna", "chicken, mash potatoes, mac & cheese", "turkey burgers, sweet potatoes fries", "stuffed peppers", "french soup"]; 

    var randomMenu = menu[Math.floor(Math.random() * menu.length)]; 
    var splitMenu = randomMenu.split(); 
    $('.words').text(splitMenu[0]); 
} 

$("button").on("click", function() { 

    weeklyMenu(); 

}); 
});

・ホープ、このことができます！

出典

2016-07-03 06:53:55

これはお金の上にあった！シンプルなlocalStorageはまさに私が望んでいたものでした。ありがとうKevinと@ T.J。私が使用できる他のオプション、特にクライアント側のクラウダー。 –

何とか最初のページから2番目のページに情報を伝えなければなりません。これを行うには、少なくとも3つの方法が（の一つは悪い考えです）があります

おそらく、この場合には、sessionStorageをウェブストレージを使用して、それがセッション固有の情報だ場合。あなたの最初のページの格納を：
```
sessionStorage.setItem("name", theUserName); 
```
とあなたの次のページがそれを取得し、私は子孫で、デフォルトでdisplay: noneを持つことになりますidhelloを持つ要素を想定してきたそこに
```
var name = sessionStorage.getItem("name"); 
if (name) { 
    $("#hello").show().find(".name").text(name); 
} 
```
を使用しています要素にはnameクラスの名前を記入してください。上記のコードは、デフォルトの非表示の要素を示しています。名前があり、それが埋め込まれている場合は
をクエリ文字列に渡します。名前を取得したら、次のページに切り替えるときにURLに"?" + encodeURIComponent(theUserName)を追加します。次に、location.searchを使用して名前を取得し、上記の＃1と同じように使用します。
使用する必要があるクッキーに保存します。私は言いたいことだけを言います：それはが可能ですが、のようにするのは、しないでください。クッキーはクライアント側のみの情報ではありません。

出典

2016-07-03 06:30:16

別のjsファイルから関数を呼び出してテキストをhtmlページに挿入する方法

答えて

関連する問題