मेरा लक्ष्य फ़ंक्शन बनाना था जो देरी के बाद उसी स्थान पर 4 divs का आदान-प्रदान करेगा जिसका अर्थ है ...

Div "कमीशन 1" दिखाई दे रहा है, इसलिए 1 सेकंड के बाद यह गायब हो जाता है और div "कमीशन 2" अपनी जगह लेता है> 1 सेकंड के बाद गायब हो जाता है> कमीशन 3> गायब हो जाता है> कमीशन 4 और इसे लूप किया जाना चाहिए, लेकिन इससे पहले कि मैं ऐसा करने में कामयाब रहा, यह पहले से ही काम नहीं कर रहा है।

मेरे पास इनपुट त्रुटि का अप्रत्याशित अंत है मुझे संकेत या पत्र की कोई कमी नहीं मिली इसलिए मुझे नहीं पता कि इस त्रुटि के साथ क्या हो रहा है

ध्यान रखें कि 4 साल के ब्रेक के बाद यह पहली बार है कि मैं जावा का उपयोग कर रहा हूं और फिर मैं पहले से ही शुरुआत कर रहा था: डी।

पहले ही, आपका बहुत धन्यवाद :)

function visibility() 
{
 if (document.getElementById("commission1") != null) {
 document.getElementById('commission1').style.display = 'display';
  setTimeout("document.getElementById('commission1').style.display = 'none'", 1000);
  setTimeout("document.getElementById('commission2').style.display = 'display'", 1000);
  setTimeout("document.getElementById('commission2').style.display = 'none'", 2000);
  setTimeout("document.getElementById('commission3').style.display = 'display'", 2000);
  setTimeout("document.getElementById('commission3').style.display = 'none'", 3000);
  setTimeout("document.getElementById('commission4').style.display = 'display'", 3000);
  setTimeout("document.getElementById('commission4').style.display = 'none'", 4000);
  setTimeout("document.getElementById('commission1').style.display = 'display'", 4000);
  }                       
1
Krzysztof Orczyk 11 अप्रैल 2018, 01:07

2 जवाब

सबसे बढ़िया उत्तर

समस्या इसलिए है क्योंकि आप setTimeout फ़ंक्शन को एक पैरामीटर के रूप में एक स्ट्रिंग प्रदान कर रहे हैं, बजाय इसके कि किसी अन्य फ़ंक्शन को निष्पादित किया जाए। इसे ऐसा दिखना चाहिए।

setTimeout(function() {document.getElementById('foo').style.display = 'none'}, 1000);

इसके अलावा, DRY (डोंट रिपीट योरसेल्फ) यानी एक ही कोड को बार-बार कॉपी करने के बजाय फ़ंक्शंस का उपयोग करें। मैंने कोड पर अपना टेक प्रदान किया।

डेमो: https://jsfiddle.net/9txkdtj3/19/

एचटीएमएल

<div id="commission1" class="invisible">1</div>
<div id="commission2" class="invisible">2</div>
<div id="commission3" class="invisible">3</div>
<div id="commission4" class="invisible">4</div>

सीएसएस

.visible {display: block;}
.invisible {display: none;}

जावास्क्रिप्ट

function hide(id){
    document.getElementById(id).className = "invisible";
}

function show(id){
    document.getElementById(id).className = "visible";
}

function visibility(){
    hide("commission4"); show("commission1");
    setTimeout(() => { hide("commission1"); show("commission2") }, 1000);
    setTimeout(() => { hide("commission2"); show("commission3") }, 2000);
    setTimeout(() => { hide("commission3"); show("commission4") }, 3000);
    setTimeout(() => { visibility() }, 4000);
}

visibility();
1
Ivan 11 अप्रैल 2018, 01:37

सबसे पहले, style.display का उपयोग करके एक तत्व दिखाने के लिए, आपको element.style.display = 'block' (या अन्य मान्य प्रदर्शन मान जैसे inline-block) करना चाहिए। मुझे नहीं लगता कि display एक मान्य css प्रदर्शन मान है।

जहां तक ​​आप जिस समग्र लक्ष्य को प्राप्त करने का प्रयास कर रहे हैं, उसके बारे में मैं इस प्रकार बताऊंगा:

const MAX = 4;
const TIMEOUT = 1000;

function fn(n) {
	if (n > MAX || n < 0) {
		n = 1;
	}

	for (let i = 1; i <= MAX; i++) {
		let id = "commission-" + i;
		let div = document.getElementById(id);
		if (n === i) {
			div.style.display = 'block';
		} else {
			div.style.display = 'none';
		}
	}

	setTimeout(function () {
		fn(++n);
	}, TIMEOUT);
}

fn(1);
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body style="padding:24px">
	<div id="commission-1">Commission 1</div>
	<div id="commission-2">Commission 2</div>
	<div id="commission-3">Commission 3</div>
	<div id="commission-4">Commission 4</div>
	
	<script src="main.js"></script>
</body>

</html>
1
Michio 11 अप्रैल 2018, 04:10