HTML and javascript colab

我正在用LoL（英雄聯盟）API進行應用程序。
目前我在輸入時遇到問題。首先，我在JavaScript中創建了一個inputbox和submitbutton，並編寫了一些代碼，以便我可以使用它。HTML and javascript colab

var inputbox = document.createElement("input"); 
inputbox.type = "input"; 
document.body.appendChild(inputbox); 

var button = document.createElement("input") 
button.type = "button"; 
button.value = "Press me!"; 
document.body.appendChild(button);

之後我用這個代碼來使用輸入值。

button.addEventListener("click", function() { 
    LookUpSummonerInformation(inputbox.value); 
});

我的問題是，我怎麼能把這個到我的index.html而不是我的js文件。我不能使用表單來完成它，因爲它可能是單頁面應用程序。

在此先感謝。

來源

2016-04-26 Jeroen Tondeleir

將標籤之間的代碼！ –

爲什麼不直接寫html？你可以把js代碼放在'' – neilsimp1

<!DOCTYPE html> 
<html> 
    <head> 
    <title>LoL Thing</title> 
    </head> 

    <body> 
    <input type='input' id='lol-input'></input> 
    <button onclick='do_the_thing();'>Press me!</button> 

    <script> 
     function do_the_thing() { 
     var inputbox = document.querySelector('#lol-input'); 
     LookUpSummonerInformation(inputbox.value); 
     } 
    </script> 
    </body> 
</html>

這裏是你將如何與HTML混合JS一個簡單的例子。

來源

2016-04-26 14:19:43 chrisd1100

這似乎是一個好主意，但是我怎麼能包含我的腳本文件（lol。 JS）如果腳本標記已被使用？ –

編輯：測試了這一點，我仍然可以包含該文件。 –

我猜你正在尋找這樣的事情

<html> 
    <head> 
    <script> 
     document.onload = function(){ 
     var inputbox = document.createElement("input"); 
     inputbox.type = "input"; 
     document.body.appendChild(inputbox); 

     var button = document.createElement("input") 
     button.type = "button"; 
     button.value = "Press me!"; 
     button.addEventListener("click", function() { 
      LookUpSummonerInformation(inputbox.value); 
     }); 
     document.body.appendChild(button); 
     } 
    </script> 
    </head> 
    <body> 
    ... 
    </body> 
</html>

來源

2016-04-26 14:18:17 QoP

您可以隨時在您的html文檔正文中使用<script>標籤包含JavaScript代碼。

如：

<html> 
    <head> 
    <!-- Head code here --> 
    </head> 
    <body> 
    <script> 
     // Your JavaScript code goes here 
    </script> 
    <!-- Remaining body code here --> 
    </body> 
<html>

或者

您還可以使用<script>標籤鏈接的javascript到你的索引文件。

如：

<html> 
    <head> 
    <!-- Head code here --> 
    </head> 
    <body> 
    <script src="path_to_your_js_file"></script> 
    <!-- Remaining body code here --> 
    </body> 
<html>

來源

2016-04-26 14:23:08

HTML and javascript colab

回答

相關問題