如何在使用JavaScript的html文件中定義JavaScript文件中的變量？

-1

我已經搜索了一個答案，但我還沒有找到解決我的問題的答案，因爲我不是如何將其作爲搜索詞。我的問題是，我想爲多個HTML文件使用相同的JS代碼，但只有少數值需要在JS中進行更改，具體取決於HTML文件。如何在使用JavaScript的html文件中定義JavaScript文件中的變量？

HTML

<!DOCTYPE html> 
<!--Replace:: Line 14, Line 82: 'PROJECT' with name of the project; Line 15: '0' with the last counted image; line 94: 'PROJECT' with base name of picture files--> 
<!--fill in any special instructions at each step in the text array.--> 
<html> 
<head> 

<link type="text/css" rel="stylesheet" href="../defaultStyle.css"/> 

<script type="text/javascript" src = "../buttons.js"> 

var num = 0 
var NAME = PROJECT 
var LAST = 100 
var LAST1 = LAST-1 

text[0] = "a" 
text[1] = "b" 
<!--...etc--> 

</script> 

    <link type="text/css" rel="stylesheet" href="../projectStyle.css"/> 

</head> 

<body> 

    <div> 
     <p href="JavaScript:StepDisplay()" id="Step">PROJECT</p> 
    </div> 

    <div id="Text"> 
    </div> 

    <div> 
     <button type="button" onClick="JavaScript:Back()"> Back</button> 
     <button type="button" onClick="JavaScript:Next()"> Next</button> 
    </div> 

    <div> 
     <img src="image/PROJECT (0).jpg" id="Pic"> 
    </div> 

</body> 
</html> 


***JavaScript*** 

var text = new Array[100] 
var num = 0 
var NAME = PROJECT 
var LAST = 100 
var LAST1 = 99 

function Next(){ 
    num = num + 1 
    if (num == LAST) 
    {num = 0} 
    stepnum = num.toString(); 
    document.getElementById("Pic").src = "image/"+ NAME + "(" + stepnum + ").jpg" 
    document.getElementById("Text").innerHTML = text[num] 
    if (num == 0) 
    document.getElementById("Step").innerHTML = NAME 
    if (num == 1) 
    document.getElementById("Step").innerHTML = "Pieces" 
    if (num > 1) 
    document.getElementById("Step").innerHTML = "Step " + (num-1).toString(); 
} 

function Back(){ 
    num = num - 1 
    if (num < 0) 
    {num = LAST1} 
    stepnum = num.toString(); 
    document.getElementById("Pic").src = "image/" + NAME + "(" + stepnum + ").jpg" 
    document.getElementById("Text").innerHTML = text[num] 
    if (num == 0) 
    document.getElementById("Step").innerHTML = NAME 
    if (num == 1) 
    document.getElementById("Step").innerHTML = "Pieces" 
    if (num > 1) 
    document.getElementById("Step").innerHTML = "Step " + (num-1).toString(); 
}

來源

2014-06-12 user1888736

您的問題不清楚。哪部分需要根據HTML文件進行更改？一般的答案是你應該定義函數或類，並且改變的東西應該作爲函數的參數提供。 – Barmar

將你的'buttons'腳本包裝成一個obj或函數，然後通過'num'，'NAME'，...作爲參數 – Fabricator

@Fabricator，beaurriful :-) – Charles

你應該包括該腳本之前定義的局部變量。

<script> 
    // local variables 
    var firstname = "John", lastname = "Doe"; 
</script> 
<script src="hellohello.js"></script>

在js文件，我們需要確保我們的局部變量存在，如果沒有，我們可以定義默認的變量或停止腳本。

// Check if the variable already exists 

// If it doesn't we'll give it a default variable 
if(typeof(firstname)==='undefined') firstname = "Guest"; 
if(typeof(lastname)==='undefined') lastname = ""; 
alert("Hello "+ firstname +" "+ lastname); 

// Or just do something else 
if(typeof(firstname)!=='undefined' && typeof(lastname)!=='undefined') { 
    // Do something 
} else { 
    // Do nothing 
}

演示1：http://bycreativeminds.com/playground/vanilla/js-demo-110.html
演示2：http://bycreativeminds.com/playground/vanilla/js-demo-111.html

來源

2014-06-13 00:43:01 hutchbat

首先包含腳本，然後重寫內聯變量會不會更容易？我認爲它暫停運行JavaScript，直到所有腳本加載？你需要改變onLoad（或$（document）.ready）中的變量嗎？ –

在加載腳本之前定義一個變量要簡單得多。 – hutchbat

啊。我明白你在做什麼。好吧，我將以不同的方式發佈，但我不一定認爲它會更好。 –

我不知道這是不是更好，然後hutchbat的或沒有，但它是一個不同的方式。

我所做的是buttons.js分解成兩個文件：buttons_init.js和buttons.js

buttons_init.js包括使用它

var text = new Array[100] 
var num = 0 
var NAME = PROJECT 
var LAST = 100 
var LAST1 = 99

所有intialization，而不是代碼因此，在你的HTML，你這樣做（最好是在BUTTOM，除非你需要它來運行初期）：

<script type="text/javascript" src = "../buttons_init.js"> 
<script> 
    // overwrite any variables you need to change 
    num = 5 
    LAST = 200 
    LAST1 = LAST-1 
</script> 
<script src = "../buttons.js>

這樣做的好處是，你不必記得要檢查看變量在您的buttons_init.js中是未定義的。缺點是你需要包含兩個文件（雖然不如以前那麼多，但它會稍微減緩負載），並且你必須記住要將默認變量放在_init文件中（它有一側記錄它的影響）。有些人會喜歡一種方式，有些人會喜歡另一種。我只是將其作爲替代方案呈現。

一種完全不同的方式是將「選項」結構發送到Next和Prev函數（將它們與函數內部的默認值合併），或者將它們變爲類（或jQuery插件），但似乎過度爲這樣一個簡單的例子。

來源

2014-06-13 01:51:32

所以我做到了這一點，我仍然沒有得到它的工作。我無法在這裏發佈內容，我沒有足夠的字符。我真的不希望每個項目都有另一個文件，因此我只是將所有變量放在HTML文檔的腳本中，正如@hutchbat所建議的那樣。這應該是一樣的，對吧？ – user1888736

是的，它應該是一樣的。如果你喜歡hutchbat的答案，無論如何，一起去吧。我只是想提供其他我認爲是平等的選擇。 –

如何在使用JavaScript的html文件中定義JavaScript文件中的變量？

回答

相關問題