添加文本取決於使用變量的文本已經存在嗎？

JS：添加文本取決於使用變量的文本已經存在嗎？

var textVal = 0; 
function clickMe() { 
    if (var textVal == 0) { 
     document.getElementById('txt').innerHTML = "TO"; 
     textVal += 1; 
    }; 
    else if (var textVal == 1) { 
     document.getElementById('txt').innerHTML += " INFINITY"; 
     textVal += 1; 
    }; 
    else if (var textVal == 2) { 
     document.getElementById('txt').innerHTML += " AND"; 
     textVal += 1; 
    }; 
    else if (var textVal == 3) { 
     document.getElementById('txt').innerHTML += " BEYOND"; 
     textVal += 1; 
    }; 
    else { 
    document.getElementById('txt').innerHTML = ""; 
     textVal = 0; 
    }; 
};

HTML：

<h1 id="txt"></h1> 
<button onclick="clickMe()">CLICK ME</button>

我想有一個按鈕，根據已經存在哪些文本添加文本。我正嘗試使用一個變量來做到這一點。我的邏輯是，如果沒有文本，變量爲零，所以它添加第一個單詞，然後變量將被提高一個，以便下次點擊該按鈕時，它將使用下一個值，依此類推直到它已滿，然後它將清空文本並將其設置爲0，以便它會重複。
我不是很確定我做錯了什麼，它似乎應該工作。任何幫助/提示？

來源

2015-05-01 Dr. Owning

作爲初學者，每次使用它時都不需要聲明textVal變量.... – Sid

除了一些語法問題，您的一般方法將起作用，但您可以大大簡化。

// Get an array of words by splitting a sentence on spaces. 
var words = ('TO INFINITY AND BEYOND').split(' '); 

// Counter of the current word 
var currentWord = -1; 

// Define our click handler 
function clickMe() { 

    // Add one to the current word index 
    currentWord++; 

    // If we have gone beyond the number of words we have, reset 
    if (currentWord >= words.length) { 
    currentWord = 0; 
    document.getElementById('txt').innerHTML = ''; 
    } 

    // Display the word 
    document.getElementById('txt').innerHTML += words[currentWord]; 
}

我也應該注意到，因爲您正在設置HTML，所以您需要確保無論您放入該HTML中是否正確地轉義爲HTML。 &變成&,>變成〜>`等等。如果你設置文本屬性，這是自動完成的。

來源

2015-05-01 18:40:34 Brad

你的JS應該是這樣的：

var textVal = 0; 
function clickMe() { 
    if (textVal == 0) { 
     document.getElementById('txt').innerHTML = "TO"; 
     textVal ++; 
    } 
    else if (textVal == 1) { 
     document.getElementById('txt').innerHTML += " INFINITY"; 
     textVal += 1; 
    } 
    else if (textVal == 2) { 
     document.getElementById('txt').innerHTML += " AND"; 
     textVal += 1; 
    } 
    else if (textVal == 3) { 
     document.getElementById('txt').innerHTML += " BEYOND"; 
     textVal += 1; 
    } 
    else { 
     document.getElementById('txt').innerHTML = ""; 
     textVal = 0; 
    } 
};

這就是工作，我建議你閱讀Clean code: A Handbook of Agile Software Craftsmanship

來源

2015-05-01 18:40:43

HTML代碼

<!DOCTYPE html> 
<html> 
<head> 
    <script src="app2.js"></script> 
</head> 
<body> 
    <h1> hello </h1> 
    <h1 id="txt"></h1> 
    <button onclick="clickMe()">CLICK ME</button> 
</body> 
</html>

js代碼

var textVal = 0; 
function clickMe() { 
    if (textVal == 0) { 
     document.getElementById('txt').innerHTML = "TO"; 
     textVal += 1; 
    } 
    else if (textVal == 1) { 
     document.getElementById('txt').innerHTML += " INFINITY"; 
     textVal += 1; 
    } 
    else if (textVal == 2) { 
     document.getElementById('txt').innerHTML += " AND"; 
     textVal += 1; 
    } 
    else if (textVal == 3) { 
     document.getElementById('txt').innerHTML += " BEYOND"; 
     textVal += 1; 
    } 
    else { 
    document.getElementById('txt').innerHTML = ""; 
     textVal = 0; 
    } 
}

來源

2015-05-01 18:56:02

添加文本取決於使用變量的文本已經存在嗎？

回答

相關問題