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 1222 21.09.2017, 11:33
Ostatni post: pheto
  Jak w stronie internetowej uzyskać div-a nad margin? toslaw1 5 1132 25.02.2017, 15:18
Ostatni post: dzikuu86
  Zdjęcia w <div> ZanziBar 9 8432 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
  Jaki kod pod taką stronę? aktywny27 11 18770 10.01.2018 19:36
Ostatni post: Ajgor
  Prośba o stworzenie strony internetowej. Matiexis 0 7568 08.01.2018 19:59
Ostatni post: Matiexis
  Zmiana wyglądu ''index of'' w XAMPP'ie domeczegg 3 7224 06.01.2018 13:14
Ostatni post: domeczegg
  Skąd za darmo podbrać wtyczki flash na stronę html5 ? aktywny27 0 7171 28.12.2017 10:01
Ostatni post: aktywny27
  Wybór pomiędzy dwoma hostingami-te same oczekiwania ale inne paramerty i cena raxer 4 7292 26.12.2017 10:31
Ostatni post: raxer
  Przetwarzanie arkusza stylów się nie powiodło bartek164 0 6691 22.12.2017 20:03
Ostatni post: bartek164
  Problem ze spamem - recaptcha Tazz 5 10854 22.12.2017 17:37
Ostatni post: Ajgor
  Problem z kodem po zmianie nazwy linku. yansowy 8 6975 12.12.2017 12:26
Ostatni post: yansowy
  Jak zrobić stronę do sprzedaży plików modeli 3d Kristoffer 3 6789 08.12.2017 16:10
Ostatni post: Kristoffer
  Awin opinie breko 6 9395 30.11.2017 12:43
Ostatni post: breko
  zmiana preferowanej wersji domeny google + all in one seo pack Lukaskov 0 6018 30.11.2017 06:03
Ostatni post: Lukaskov
  Czy to oszustwo? bartek164 5 6173 28.11.2017 23:58
Ostatni post: raxer
  Szablon wordpress podobny do innej strony letnil 1 5868 28.11.2017 13:21
Ostatni post: Arhant94
  Kupno książek do informatyki. p9av 0 5268 27.11.2017 13:08
Ostatni post: p9av
  Webinar - z generowaniem kodu/tokenu na określony czas Artur3333 3 5829 21.11.2017 21:59
Ostatni post: Michu_PL