Html Events Yardım!

17-08-2020, 12:18:42

Merhaba arkadaşlar, basit bir proje yapıyorum. Yapmam gereken seçmiş olduğum text içindeki kelimeleri butona tıkladığımda buton rengine dönüştürmesi.
Örnek linkteki gibi olacak. http://doccano.herokuapp.com/demo/na...y-recognition/

Örneğin bir text var, üst kısımda da etiketler var, insan, konum vs.
Text'te olan ismi seçerek üstteki isim etiketine tıkladığımızda ismin etiket rengini almasını istiyorum. Bilgisi olan varsa yardımcı olabilir mi?

Yeniyim, ilk defa js kullanıyorum bilginize.
Teşekkürler.

17-08-2020, 12:51:57

#2

mustafasatirogl

github da dosyaları ve kullanımı anlatılmış aslında. İnceledinmi bilmiyorum ama

17-08-2020, 13:20:13

#3

firatatalay34

Github'a göz atmaya çalıştım fakat dizin olarak bile çok kavrayamadım projeyi. Events'ın adını keşfetsem yeterli aslında araştırmak için ama yine bakınayım, teşekkürler

18-08-2020, 14:50:54

#4

~~SpaceCnn~~

Üyeliği durduruldu

firatatalay34 adlı üyeden alıntı: mesajı görüntüle

Merhaba arkadaşlar, basit bir proje yapıyorum. Yapmam gereken seçmiş olduğum text içindeki kelimeleri butona tıkladığımda buton rengine dönüştürmesi.
Örnek linkteki gibi olacak. http://doccano.herokuapp.com/demo/na...y-recognition/

Örneğin bir text var, üst kısımda da etiketler var, insan, konum vs.
Text'te olan ismi seçerek üstteki isim etiketine tıkladığımızda ismin etiket rengini almasını istiyorum. Bilgisi olan varsa yardımcı olabilir mi?

Yeniyim, ilk defa js kullanıyorum bilginize.
Teşekkürler.

En basitinden şu şekilde yapabilirsini (jquery varlığını kabul ediyorum, pure javascipt ise ona göre yazalım);

<span>Örnek Makalemiz, javascript seçim css</span><br>
<span>Örnek Makalemiz, javascript seçim css</span><br>

<button class="btn style" type="button" />Sitil değiştir</button>

$(function() {
    $('.style').on('click', function() {
    var selectionText = selection();
   $('.changeText1').css({"background":"red"}); // fonksiyon içerisinde oluşturduğumuz elemente css ataması yapıyoruz
    });
});

function selection() {
    try {
        if (window.ActiveXObject) { return document.selection.createRange().htmlText; }

           var button = document.createElement("button"); // Seçilen alandan buton oluşturuyoruz. Siz burada span, div vs.. farklı bir dom element oluştrabilirsiniz
          button.className = 'changeText1'; // Oluşturuduğunuz elemente uniq bir class atayın ki her birini farklı biçimlendirebilesiniz
         getSelection().getRangeAt(0).surroundContents(button);

        return button.innerHTML;

     } catch (e) {

    if (window.ActiveXObject) { return document.selection.createRange(); }
        return getSelection();
    }
}

19-08-2020, 12:21:32

#5

firatatalay34

mustafasatirogl adlı üyeden alıntı: mesajı görüntüle

github da dosyaları ve kullanımı anlatılmış aslında. İnceledinmi bilmiyorum ama

SpaceCnn adlı üyeden alıntı: mesajı görüntüle

En basitinden şu şekilde yapabilirsini (jquery varlığını kabul ediyorum, pure javascipt ise ona göre yazalım);

<span>Örnek Makalemiz, javascript seçim css</span><br>
<span>Örnek Makalemiz, javascript seçim css</span><br>

<button class="btn style" type="button" />Sitil değiştir</button>

$(function() {
    $('.style').on('click', function() {
    var selectionText = selection();
   $('.changeText1').css({"background":"red"}); // fonksiyon içerisinde oluşturduğumuz elemente css ataması yapıyoruz
    });
});

function selection() {
    try {
        if (window.ActiveXObject) { return document.selection.createRange().htmlText; }

           var button = document.createElement("button"); // Seçilen alandan buton oluşturuyoruz. Siz burada span, div vs.. farklı bir dom element oluştrabilirsiniz
          button.className = 'changeText1'; // Oluşturuduğunuz elemente uniq bir class atayın ki her birini farklı biçimlendirebilesiniz
         getSelection().getRangeAt(0).surroundContents(button);

        return button.innerHTML;

     } catch (e) {

    if (window.ActiveXObject) { return document.selection.createRange(); }
        return getSelection();
    }
}

Merhaba yardımınız için çok teşekkürler. Attığınız kod parçasını denedim fakat buton'a tıkladığımda işlevsiz kaldı acaba sorun nedir anlayamadım?
Ek olarak jquery import ettim fakat pure hakkında bilgim yok ondan kaynaklı mıdır acaba?

19-08-2020, 13:01:30

#6

~~SpaceCnn~~

Üyeliği durduruldu

firatatalay34 adlı üyeden alıntı: mesajı görüntüle

Merhaba yardımınız için çok teşekkürler. Attığınız kod parçasını denedim fakat buton'a tıkladığımda işlevsiz kaldı acaba sorun nedir anlayamadım?
Ek olarak jquery import ettim fakat pure hakkında bilgim yok ondan kaynaklı mıdır acaba?

javascripti ilgili alanlarını tag içine almalısınız. HTML 5 tam sayfa halini nofile iletiyorum. Herhangi bir text editörde .html olarak kaydedip browser da açın çalışacak.

link : nofile_js_test.html

19-08-2020, 14:26:35

#7

firatatalay34

SpaceCnn adlı üyeden alıntı: mesajı görüntüle

javascripti ilgili alanlarını tag içine almalısınız. HTML 5 tam sayfa halini nofile iletiyorum. Herhangi bir text editörde .html olarak kaydedip browser da açın çalışacak.

link : nofile_js_test.html

Teşekkürler