Witamy na forum PC Format Zapraszamy do REJESTRACJI


Użytkownicy przeglądający ten wątek: 1 gości

[JS] funkcja zmieniająca zawartość div'a w listę

#1
[JS] funkcja zmieniająca zawartość div'a w listę
Witam. próbowałem napisać funkcję w javascript, która po wywołaniu zamienia wszystkie znaki nowej lini w znaczniku <pre> na elementy listy numerycznej. nigdy wcześniej nie miałem styczności z JS (tylko z PHP, html, css i mysql) ale wiedząc że JS jest podobny do PHP przeczytałem dwa kursy i spróbowałem coś sklecić:
to wsadziłem do sekcji <head>:

Kod:
<script type="text/javascript">
function linenum(id){
var obj= document.getElementById(id).innerHTML;

obj= "<ol><li>"+obj.replace(/<br>/g,"</li><li>")+"</li></ol>";
}
</script>

a do body to:


Kod:
<pre id="code"><code>
function lol(){
echo 'jakistekst';
}

</code></pre>

<script>
linenum("code");
</script>
niestety mój kod nie działa. nie potrafię znaleźć błędu gdyż jestem prawie zielony w tym temacie więc niezbyt wiem gdzie szukać.
Dzięki wielkie za jakąkolwiek pomoc
P.S
na stronie chcę dodać parę elementów w których będzie trzeba ponumerować linie.
 System operacyjny: windows_eight Przeglądarka: firefox
#2
RE: [JS] funkcja zmieniająca zawartość div'a w listę
Heh, bardzo dobrze kombinujesz, z tym, że…

Po pierwsze, <br> to taka "sztuczna" nowa linia, Ty chcesz szukać znaku nowej linii, czyli \n a nie <br>.

Po drugie, w przypadku obj = document.getElementById … obj nie będzie referencją, więc zmiana zawartości obj nie zmieni oryginału.

Po trzecie, chcesz się odwołać do tego co jest w code, a nie w pre.

No i po czwarte, wszystko co jest w pre jest interpretowane, nic nie jest pomijane, nawet znak nowej linii po code, a co za tym idzie miałbyś jako pierwszą linię pustą linię.

Po małych zmianach:
Kod:
<script type="text/javascript">
function linenum(id){
    var obj = document.getElementById(id).firstChild.innerHTML;
    obj = "<ol><li>" + obj.replace(/\n/g,"</li><li>") + "</li></ol>";
    document.getElementById(id).firstChild.innerHTML = obj;
}
</script>

<pre id="code">
<code>function lol(){
echo 'jakistekst';
}</code>
</pre>

<script>
linenum("code");
</script>
 System operacyjny: linux Przeglądarka: iceweasel
#3
RE: [JS] funkcja zmieniająca zawartość div'a w listę
Dzięki za odpowiedź już prawie mi to pomogło tylko teraz, gdy wywołuję zmodyfikowaną przez ciebie funkcję to output na stronie wygląda tak:
[Obrazek: Przechwytywanie.PNG]
nie wiem dlaczego pojawia się tam ta dodatkowa zakreślona na czerwono jedynka.
Poczytam jeszcze o tym firstchild.
No i pozostaje tylko jeszcze jeden problem. Chciałbym po wywołaniu funkcji na samym końcu strony, aby zmieniała ona w ten sposób wszystkie sekcje
Kod:
<pre id="code">
<code>
...
</code>
</pre>
A na razie zmienia ona tylko pierwszą (od góry strony).
 System operacyjny: windows_eight Przeglądarka: firefox
#4
RE: [JS] funkcja zmieniająca zawartość div'a w listę
(03.07.2013, 11:03)szypo napisał(a): [...]Chciałbym po wywołaniu funkcji na samym końcu strony, aby zmieniała ona w ten sposób wszystkie sekcje
Kod:
<pre id="code">
<code>
...
</code>
</pre>
A na razie zmienia ona tylko pierwszą (od góry strony).

Chcesz aby zmiany dotyczyły wszystkich elementów od ID code, jednak jest to niemożliwe, gdyż ID jest unikatowym identyfikatorem. Oznacza to, że każdy element powinien mieć inne ID i nie mogą się one dublować.
Najprostszym sposobem będzie wszystkim elementom nadać jednakową klasę, następnie pobrać tablicę wszystkich elementów i za pomocą pętli je edytować.

Kod:
<script type="text/javascript">
window.onload=function(){
    function linenum()
    {
        var pre_list = document.getElementsByClassName("code");
        for(var i = 0; i < pre_list.length; i++)
        {
            var obj = pre_list[i].firstChild.innerHTML;
            obj = "<ol><li>" + obj.replace(/\n/g,"</li><li>") + "</li></ol>";
            pre_list[i].firstChild.innerHTML = obj;
        }
    }
    linenum();
};
</script>

Kod:
<pre class="code">
<code>function lol(){
echo 'jakistekst';
}</code>
</pre>

<pre class="code">
<code>function lol(){
echo 'trololo';
}</code>
</pre>
 System operacyjny: windows_seven Przeglądarka: chrome
#5
RE: [JS] funkcja zmieniająca zawartość div'a w listę
dzięki wielkie wszystkim za pomoc teraz wszystko działa :D
 System operacyjny: windows_eight Przeglądarka: firefox
Programy: Polecane / Nowe / Inne




Podobne wątki ([JS] funkcja zmieniająca zawartość div'a w listę)
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Dynamiczne ustalanie wysokości div. DJ Zgon 2 1189 21.09.2017, 11:33
Ostatni post: pheto
  Jak w stronie internetowej uzyskać div-a nad margin? toslaw1 5 1117 25.02.2017, 15:18
Ostatni post: dzikuu86
  Zdjęcia w <div> ZanziBar 9 8308 17.06.2015, 19:31
Ostatni post: rafineria888

Skocz do:


Wybrane wątki ([JS] funkcja zmieniająca zawartość div'a w listę)
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  Wychwycenie pobrania pliku chwm 0 5043 24.10.2017 15:06
Ostatni post: chwm
  Problem z włączeniem kompresji na serwerze szczep33 1 5007 23.10.2017 13:13
Ostatni post: Ajgor
  Ogólne pytania dot.domeny hny 1 4778 22.10.2017 23:18
Ostatni post: Ajgor
  Pytanie - 12 lat html,css ivall 1 4948 21.10.2017 22:40
Ostatni post: Ajgor
  karuzela obrazków wordpress i podwójny lightbox Chr1stian 1 5211 27.09.2017 21:54
Ostatni post: Chr1stian
  Sprawdzony hosting obrazków dla allegro comPREhensive7 5 9255 26.09.2017 19:09
Ostatni post: Ajgor
  Poszukuje dobrego edytora Janusz123 10 10205 23.09.2017 21:39
Ostatni post: blazej_s
  Limit pliku ZIP w Menedzerze plików hostingu OVH raxer 11 9404 22.09.2017 16:11
Ostatni post: raxer
  Dynamiczne ustalanie wysokości div. DJ Zgon 2 1189 21.09.2017 11:33
Ostatni post: pheto
  Galeria wordpress Chr1stian 3 4580 18.09.2017 14:09
Ostatni post: dzikuu86
  wordpress - usunięcie widgetów na jednej podstronie Chr1stian 5 1447 17.09.2017 19:02
Ostatni post: Chr1stian
  łączenie strony z baza danych slawek0334 9 5322 11.09.2017 22:20
Ostatni post: Ajgor
  Martwa reCAPTCHA po update phpbb3 Tazz 2 1192 25.08.2017 08:12
Ostatni post: Tazz
  Problem z bannerem w HTML Tazz 6 5319 18.08.2017 16:57
Ostatni post: Tazz
Exclamation Sporadyczna niedostępność strony natalia_kremy 10 9816 17.08.2017 13:05
Ostatni post: Marcin_84