Почему моя функция не работает с другими DOM-элементами?
Хотел написать пользовательскую функцию printContent, которая делала бы анимацию для любой span. Однако запустив её несколько раз она не работает. А работает только если она в коде применяется только один раз? Почему, как её перенастроить? Подскажите, плиз.
<html> <title></title> <head> <span id="span1"></span> <span id="span2"></span> </head> <body> <script src="script.js"></script> <script> printContent("span1", str); //document.getElementById("span1").style.width = document.body.clientWidth; printcontent("span2", str2); </script> </body> </html> // global variable to store content var str = "Content1. Content1.Content1.Content1.Content1.Content1.Content1.Content1.Content1."; var str2 = "Content2. Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2."; // variable to store length of content length = str.length; // global variable to stop window method setInterval var stop; // global variable counter var counter = 0; // global variable to place content to the left var left = 0; // global font variable var font = 0; // global variable for borderTopColor // global variables to store position values var x = 0; y = 0; var a = 0; var b = 0; var c = 0; var stopf = 0; function printContentImplementation(span, string){ var gs = document.getElementById(span); gs.style.fontFamily = "Arial"; gs.style.fontWeight = "Arial"; gs.style.fontVariant = "small-caps"; gs.style.position = "absolute"; if(counter == string.length-1){ gs.style.borderTop = "5px solid rgb(0,0,0)"; gs.style.borderBottom = "1px solid rgb(0,0,0)"; gs.style.backgroundColor = "rgb(255,255,255)"; //gs.style.top = window.innerHeight - 100; var stop2 = window.setInterval( function(){ if(y == 100){ window.clearInterval(stop2); stop2 = null; } gs.style.top = y+"px"; y++; }, 10 ); window.clearInterval(stop); stop = null; stopf = 1; } gs.innerHTML += string[counter]; gs.style.color = "rgb(0,0,0)"; gs.style.left = x+"px"; counter++; x++; } function printContent(span, string){ if(stopf == 0){ stop = window.setInterval( function() { printContentImplementation(span, string) }, 10 ); } } |
Обнуляйте переменные высшего уровня или определяйте их внутри функции. После первого вызова это условие будет всегда выполняться:
if(y == 100) |
Вы перменными не пробывали пользоваться?
к примеру так var elem = document.getElementById(span); elem.style.fontFamily = "Arial"; что бы не нагружать браузер и не писать индуский код. |
Как эту пользовательскую функцию исправить, так как она не работает больше одного раза; Покажите номер строки, которую надо исправить.
|
Цитата:
|
Отредактировал код. применил глобальную переменную для кода.
Вы говорите обнулять переменные в конце функции. Какие именно, сколько, номер строк. Покажите как. Please. |
Цитата:
|
Всё равно не работает.
|
Цитата:
|
// global variable to store content var str = "Content1. Content1.Content1.Content1.Content1.Content1.Content1.Content1.Content1."; var str2 = "Content2. Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2.Content2."; // variable to store length of content length = str.length; // global variable to stop window method setInterval var stop; // global variable counter var counter = 0; // global variable to place content to the left var left = 0; // global font variable var font = 0; // global variable for borderTopColor // global variables to store position values var x = 0; var y = 0; var a = 0; var b = 0; var c = 0; var stopf = 0; function printContentImplementation(span, string){ var gs = document.getElementById(span); gs.style.fontFamily = "Arial"; gs.style.fontWeight = "Arial"; gs.style.fontVariant = "small-caps"; gs.style.position = "absolute"; if(counter == string.length-1){ gs.style.borderTop = "5px solid rgb(0,0,0)"; gs.style.borderBottom = "1px solid rgb(0,0,0)"; gs.style.backgroundColor = "rgb(255,255,255)"; //gs.style.top = window.innerHeight - 100; var stop2 = window.setInterval( function(){ if(y == 100){ window.clearInterval(stop2); stop2 = null; y = 0; x = 0; left = 0; top = 0; counter = 0; font = 0; stop = 0; } gs.style.top = y+"px"; y++; }, 10 ); window.clearInterval(stop); stop = 0; left = 0; stopf = 1; x = 0; y = 0; top = 0; counter = 0; font = 0; } gs.innerHTML += string[counter]; gs.style.color = "rgb(0,0,0)"; gs.style.left = x+"px"; counter++; x++; } function printContent(span, string){ if(stopf == 0){ stop = window.setInterval( function() { printContentImplementation(span, string) }, 10 ); } } |
Часовой пояс GMT +3, время: 23:56. |