2013-10-24 3 views
1

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

В основном я пытаюсь получить эту функцию «Rip It», чтобы пройти через десятичные числа Dewey, изменить некоторые из них и вернуть новый номер и сообщение о том, что оно было изменено. Существует также одно помеченное «no number», которое должно возвращать ошибку (не обязательно окно предупреждения, сообщение в том же пространстве в порядке.)

Я новичок и не очень хорошо разбираюсь в этом, поэтому Пожалуйста, будьте нежны! Большое спасибо!

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 
function RipIt() 
{ 
for (var i = l; i <=10 i=i+l) 
{ 
var dewey=document.getElementById(i); 
dewey=parseFloat(dewey); 

if (dewey >= 100 && 200 >= dewey) 
    { 
    document.getElementById('dewey'+ 100) 
    } 
else if (dewey >= 400 && 500 >= dewey) 
    { 
    document.getElementById('dewey'+ 200) 
    } 
else if (dewey >= 850 && 900 >= dewey) 
    { 
    document.getElementById('dewey'-100) 
    } 
else if (dewey >= 600 && 650 >= dewey) 
    { 
    document.getElementById('dewey'+17) 
    } 
} 
} 
</script>  
</head> 
<body> 

<h4>Records to Change</h4> 
<ul id="myList"> 
    <li id ="1">101.33</li> 
    <li id = "2">600.01</li> 
    <li id = "3">001.11</li> 
<li id = "4">050.02</li> 
    <li id = "5">199.52</li> 
    <li id = "6">400.27</li> 
<li id = "7">401.73</li> 
    <li id = "8">404.98</li> 
    <li id = "9">no number</li> 
<li id = "10">850.68</li> 
    <li id = "11">853.88</li> 
    <li id = "12">407.8</li> 
    <li id = "13">878.22</li> 
    <li id = "14">175.93</li> 
    <li id = "15">175.9</li> 
<li id = "16">176.11</li> 
    <li id = "17">190.97</li> 
    <li id = "18">90.01</li> 
<li id = "19">191.001</li> 
    <li id = "20">600.95</li> 
    <li id = "21">602.81</li> 
<li id = "22">604.14</li> 
    <li id = "23">701.31</li> 
    <li id = "24">606.44</li> 
    <li id = "25">141.77</li> 

</ul> 
<b> </b> 
<input type="button" value="Click To Run" onclick="RipIt()"> 
<!-- <input type="button" value="Click Here" onClick="showAlert();"> --> 

</body> 
</html> 
+0

Идентификаторы AFAIK не должны начинаться с цифры. Что должно делать 'getElementById ('dewey' + 100)' do? – ComFreek

+0

@ComFreek: они могут в HTML. Только в селекторах CSS id, начиная с цифры, запрещается. Правила: [HTML] (http://www.w3.org/TR/html5/elements.html#the-id-attribute) | [CSS] (http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier) ​​ –

+0

@ T.J.Crowder Спасибо за исправление. Если кому-то интересно, вот официальная спецификация, которая определяет «идентификатор»: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute – ComFreek

ответ

2

Я вижу несколько проблем:

  1. Вы должны убедиться, что id значения в игре HTML, что вы на самом деле кормят в getElementById. Например, у вас есть document.getElementById('dewey'+ 100), который будет искать элемент с id значением "dewey100", но я не вижу ни одного элемента в вашей разметке с этим значением id.

  2. Вы, кажется, набрали строчной буквы l где вы имели в виду ввести цифру 1 (в вашем for цикле).

  3. Этот код:

    var dewey=document.getElementById(i); 
    dewey=parseFloat(dewey); 
    

    ... возвращает элемент с id от i (до сих пор так хорошо), но затем пытается разобрать элемент в виде числа с плавающей точкой. Элементы DOM - это объекты, передающие их в parseFloat, ничего полезного. :-) В этом случае, если вы пытаетесь проанализировать содержимое элемента, вы можете получить это через свойство innerHTML или (на большинстве браузеров) innerText только для текста. Так что, возможно:

    var dewey=document.getElementById(i); 
    dewey=parseFloat(dewey.innerHTML); 
    
  4. Линия

    document.getElementById ('Dewey' + 100)

... само по себе является "ничего не делать" линия: Она смотрит вверх элемент, но затем ничего не делает с ним. Я бы предложил изменения, но я понятия не имею, что вы пытаетесь сделать с этим элементом. :-)


Вы не можете знать об этом (будучи новый), но ваш браузер почти наверняка имеет достаточно мощный инструмент в это называется «отладчик». Посмотрите на меню, но в большинстве браузеров вы можете получить доступ к «Dev Tools» с помощью клавиши F12. Затем вы переходите на вкладку «Источник» или «Код» в появившемся окне, в котором будет показан ваш код. Если вы нажмете слева от строки, в большинстве отладчиков, которые устанавливают точку останова , которая остановит код на своих дорожках в этот момент, чтобы вы могли видеть, что происходит. Стоит потратить некоторое время на изучение этого инструмента, чтобы вы могли наблюдать за запуском вашего кода.

+0

Хорошо, спасибо! Я сделал первое. Я просто плохо разбираюсь в javascript, можете ли вы уточнить, что вы подразумеваете под последним предложением? Что мне нужно изменить? Спасибо – Uni

+0

@Uni: На самом деле, поскольку ваш код был в функции, которая была вызвана щелчком (сначала я не видел функцию), мой первоначальный первый абзац был неправильным, поэтому я удалил его. –

+0

@TJ: RE: 1) и 4) Это я пытался, например, для первого добавить 100 ко всем номерам от 100 до 200 и т. Д. Как сделать набор чисел, которые я вытащил (например, все dewey между 100 и 200), чтобы я мог добавить или вычесть что-то (например, +100) им и вернуть ответ (например, 300)? Вы правы, это в основном проблема на данный момент. 2) Ой! Спасибо! Исправлено (см. Дарион выше). 3) Я изменил детали var dewey и parseFloat - спасибо! Re: Отладчик - Да, я слышал об этом, не знаю, как его использовать или где он. Я использую Firefox ... – Uni

1

Редактирование моего старого ответа ...

Для вашего HTML я удалил идентификатор в элементах списка, так как вы можете найти лучший способ их повторить. Таким образом, вам не нужно добавлять новый идентификатор, если вы хотите добавить li. См. Ниже:

<h4>Records to Change</h4> 

<ul id="myList"> 
    <li>101.33</li> 
    <li>600.01</li> 
    <li>001.11</li> 
    <li>050.02</li> 
    <li>199.52</li> 
    <li>400.27</li> 
    <li>401.73</li> 
    <li>404.98</li> 
    <li>no number</li> 
    <li>850.68</li> 
    <li>853.88</li> 
    <li>407.8</li> 
    <li>878.22</li> 
    <li>175.93</li> 
    <li>175.9</li> 
    <li>176.11</li> 
    <li>190.97</li> 
    <li>90.01</li> 
    <li>191.001</li> 
    <li>600.95</li> 
    <li>602.81</li> 
    <li>604.14</li> 
    <li>701.31</li> 
    <li>606.44</li> 
    <li>141.77</li> 
</ul> 

<input type="button" value="Click To Run" onclick="RipIt()"> 

Для вашего javascript я нашел количество li и сохранен в детях. Затем найдите длину этого массива и установите значение «length». Затем я вытащил innerHTML из каждого дочернего элемента в массив children и parseFloat'ed его. Затем я выполнил ваше условие и создал новое значение, основанное на значении ребенка.

И наконец, это значение сохраняется в соответствующем элементе children.

на JavaScript:

function RipIt() { 
    var children = document.getElementById("myList").getElementsByTagName("li"), 
     length = children.length; 

    for (var i = 0; i < length; i++) { 

    var child = children[i].innerHTML, 
     newValue; 
    child = parseFloat(child); 

    if (child >= 100 && 200 >= child) { 
     newValue = child + 100; 
    } else if (child >= 400 && 500 >= child) { 
     newValue = child + 200; 
    } else if (child >= 850 && 900 >= child) { 
     newValue = child - 100; 
    } else if (child >= 600 && 650 >= child) { 
     newValue = child + 17; 
    } 

    children[i].innerHTML = newValue; 

    } 

} 

Вы, вероятно, должны работать на вашем условном (если/другое), чтобы получить именно то, что вы хотите. Вы не указали, какое условие необходимо выполнить в вашем ответе, поэтому я просто использовал ваш исходный код.

+0

Спасибо, что сообщили мне об этом 1/l thing - я неправильно понял, что кто-то записал для меня как L, когда это было 1. Это помогает! Во второй части о том, что я пытаюсь сделать, см. @TJ. Спасибо!! – Uni

+0

@Uni FYI см. Мой отредактированный ответ. – keepitreal

+0

Здесь он находится в JSBin: http://jsbin.com/ewEVApU/1/edit – keepitreal

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