Перерисовывает содержимое DIV с помощью вызова функции?

Просто любитель/любитель здесь - то, что это должно сделать, - это инструмент для настольной игры, в которой я играю с друзьями. Пластиковые слайдеры, которые использует игра, слишком свободны, чтобы быть надежными, поэтому я хотел воспроизвести эту функциональность как веб-страницу для использования на смартфоне во время игры.Перерисовывает содержимое DIV с помощью вызова функции?

Он получает имя персонажа из формы (на другой странице) и поставляет его в ниже. Основываясь на имени, он выбирает правильный набор атрибутов из оператора switch (я просто удалял все, кроме двух случаев), пробегает цикл for для отображения атрибутов в списке и выделяет «текущее» значение как зеленый. Две кнопки должны увеличивать или уменьшать счетчик массива («скорость») и повторно запускать функцию, которая рисует массив с новым выделенным значением. innerHTML предназначен для перерисовки div («speeddiv») с новыми результатами.

Теперь консоль javascript в хроме сообщает мне, что speedcounter() и символ не определены. Я подозреваю, что это связано с тем, что функция и переменные, которые я использую, теряются через innerhtml. Все, что я хочу сделать, это найти способ легко перерисовать/заменить счетчик стат, чтобы показалось, что выделенный номер движется вверх и вниз, когда вы нажимаете кнопки + или - внутри div. Я только работаю над атрибутом «скорость» ниже, поэтому я могу получить эту работу в первую очередь.

<!DOCTYPE html> 
<html> 
<body> 
<style type="text/css"> 
html, body { height: 100%; width: 100%; margin: 0; } 
#dossier {height: 10%; text-align: center; background: #808080} 
#container {height: 90%; width: 100%; background: #000000; overflow: hidden; float: left} 
#stats {height: 100%; width: 100%; float: left; position: relative} 
#speeddiv, #mightdiv, #sanitydiv, #knowledgediv {width: 25%; height: 100%; text-align: center; float: left; position: relative; overflow: hidden} 
#speeddiv {background: #0000FF} 
#mightdiv {background: #FF0000} 
#sanitydiv {background: #FFFF00} 
#knowledgediv {background: #00FF00} 
</style> 

<?php $character = $_GET["character"]; ?> 

<script type="text/javascript"> 

var character = "<?php echo $character ?>"; 
var sp; 
var speed; 

function speedcounter() { 
    var spx; 
    document.write(' <h2>Speed</h2></br>'); 
    document.write('<input type="button" onclick="addspeed();" value="+"><br />'); 

    for (spx=8; spx>=0; spx--) { 
    if (spx == speed) { 
    document.write('<font color=#00FF00>'); 
    } 
    document.write(sp[spx]); 
    document.write('<font color=#000000><br />'); 
    } 
    document.write ('<input type="button" onclick="remspeed();" value="-">'); 
} 

function addspeed() { 
if (speed < 8) { 
    speed++; 
    document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>"; 
} 
} 

function remspeed() { 
if (speed > 0) { 
    speed--; 
    document.getElementById("speeddiv").innerHTML = "<script type="text/javascript">speedcounter();<\/script>"; 
} 
} 

switch (character) { 
case "brandon": 

sp=["0","3","4","4","4","5","6","7","8"]; 
mt=["0","2","3","3","4","5","6","6","7"]; 
sn=["0","3","3","3","4","5","6","7","8"]; 
kn=["0","1","3","3","5","5","6","6","7"]; 

speed=3; 
might=4; 
sanity=4; 
knowledge=3; 

break; 

case "flash": 

sp=["0","4","4","4","5","6","7","7","8"]; 
mt=["0","2","3","3","4","5","6","6","7"]; 
sn=["0","1","2","3","4","5","5","5","7"]; 
kn=["0","2","3","3","4","5","5","5","7"]; 

speed=5; 
might=3; 
sanity=3; 
knowledge=3; 

break; 
} 

</script> 

<div id="dossier"> 
<script type="text/javascript"> 
    document.write(character); 
</script> 
</div> 
<div id="container"> 
<div id="stats"> 
    <div id="speeddiv"> 
    <script type="text/javascript"> 
    speedcounter(); 
    </script> 
    </div> 
    <div id="mightdiv"> 
    <h2>Might</h2></br></br> 
    </div> 
    <div id="sanitydiv"> 
    <h2>Sanity</h2></br></br> 
    </div> 
    <div id="knowledgediv"> 
    <h2>Knowledge</h2></br></br> 
    </div> 
</div> 
</div> 

</script> 

</body> 
</html>

источник

2012-06-07 Johnny H.

Я создал jsfiddle из кода вы публикуемая http://jsfiddle.net/amelvin/bwwce/ - работает на ней в интерактивном режиме может помочь.

Я думаю, что ваша проблема заключается в том, что происходит с document.write; the section on document.write объясняет, что то, что document.write делает, не очень предсказуемо.

Используйте javascript-библиотеку, такую как jquery, чтобы вставлять элементы на веб-страницу, а не document.write - the html() method in jquery (в том числе) позволяет динамически и предсказуемо манипулировать любыми аспектами страницы на основе таких событий, как нажатия кнопок, добавление или удаление кнопок или дивы.

источник

2012-06-07 22:52:40 amelvin

Спасибо за ваш ответ! Я не знал о jsfiddle, поэтому я определенно буду использовать это с этого момента. Я также посмотрю на jquery, но я старался сохранить настройку как ваниль, насколько это возможно. Еще раз спасибо! –

Я твердый приверженец пребывания как ваниль, насколько это возможно, но с подпрограммами jQuery, запеченными в рендерерах javascript современных браузеров, вы можете в значительной степени быть уверены, что ваш код по-прежнему респектабельен и очень разворачивается с этой библиотекой. Было бы очень полезно познакомиться с jQuery. Даже для любителя! – rfoo

Перерисовывает содержимое DIV с помощью вызова функции?

ответ

Смежные вопросы