JS Div içeriğini yenileme

15-07-2024, 23:14:54

JS ile bir bilinmeyen tanımladım

var x = 'burada site linki var oradan veri çekiyor'

ve belirlediğim div içerisine buradaki veriyi seçip ayıklayıp yazdırıyıor. Amacım bu veriyi istediğim gibi değiştirilebilir yapmak bunun için de;

Bir searchbar yaptım, tuşa tıklayınca function ile orada searchbar içine yazdığım şeyi çekip konsola yazırabiliyorum ama o div içerisine bu veriyi (o linkten çekeceği verileri) değiştirerek yazdıramıyorum. Bunu nasıl yapabilirim?

15-07-2024, 23:32:08

#2

~~LaravelDev~~

Üyeliği durduruldu

Örnek kod atar mısın bakayım

15-07-2024, 23:39:03

#3

Sevkoo

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

Örnek kod atar mısın bakayım

var x = 'www';

function buton(){
        var x = document.getElementById("msm").value;
        console.log(x);} // yaxdığım URL i consola yazıyor ama aşağıdaki fonksiyonu çalıştıramıyorum, orayı çalıştırıp oradaki div içerisine ayzdırdığım listeyi yenilemem gerek.

document.addEventListener('DOMContentLoaded', function () {
    
    const URL = `${x}`;

    fetch(URL)
then(response => response.json())
        .then(data => {
.
.
.Burada çevirip istediğim verileri listeye yazdırıyorum.
.
.
}

16-07-2024, 00:01:27

#4

~~LaravelDev~~

Üyeliği durduruldu

html olarak url girince veriyi göstermesi lazım
deneme olarak şu adresi yazdım https://jsonplaceholder.typicode.com/todos/1

<body>
<input type="text" id="msm" placeholder="url gir">
<button onclick="buton()">veri çek</button>
<div id="hedef"></div>
<script>
function buton() {
var x = document.getElementById("msm").value;
veriCek(x);
}
function veriCek(URL) {

fetch(URL)
.then(response => response.json())
.then(data => {
document.getElementById('hedef').innerText = JSON.stringify(data, null, 2);
})
.catch(error => console.error('bir sorun oluştu:', error));
}
</script>
</body>

Başlangıçta veri ile yüklemek istersende bu şekilde oynayabilirsin

<script>
        //değişkeni üste al
        var x = "https://jsonplaceholder.typicode.com/todos/1"
        function buton() {
            x = document.getElementById("msm").value;
            veriCek(x);
        }
        function veriCek(URL) {
            
            fetch(URL)
                .then(response => response.json())
                .then(data => {
                document.getElementById('hedef').innerText = JSON.stringify(data, null, 2);
            })
                .catch(error => console.error('bir sorun oluştu:', error));
        }
         //Dom yüklendiğinde vericek fonksiyonunu çalıştırsın
         //Böylece sayfa ilk yüklendiğinde boş gelmez veri ile gelir yeni url girince değiştirir.
        document.addEventListener('DOMContentLoaded',veriCek(x))
    </script>

16-07-2024, 00:15:47

#5

Sevkoo

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

html olarak url girince veriyi göstermesi lazım
deneme olarak şu adresi yazdım https://jsonplaceholder.typicode.com/todos/1

<body>
<input type="text" id="msm" placeholder="url gir">
<button onclick="buton()">veri çek</button>
<div id="hedef"></div>
<script>
function buton() {
var x = document.getElementById("msm").value;
veriCek(x);
}
function veriCek(URL) {

fetch(URL)
.then(response => response.json())
.then(data => {
document.getElementById('hedef').innerText = JSON.stringify(data, null, 2);
})
.catch(error => console.error('bir sorun oluştu:', error));
}
</script>
</body>

Başlangıçta veri ile yüklemek istersende bu şekilde oynayabilirsin

<script>
        //değişkeni üste al
        var x = "https://jsonplaceholder.typicode.com/todos/1"
        function buton() {
            x = document.getElementById("msm").value;
            veriCek(x);
        }
        function veriCek(URL) {
            
            fetch(URL)
                .then(response => response.json())
                .then(data => {
                document.getElementById('hedef').innerText = JSON.stringify(data, null, 2);
            })
                .catch(error => console.error('bir sorun oluştu:', error));
        }
         //Dom yüklendiğinde vericek fonksiyonunu çalıştırsın
         //Böylece sayfa ilk yüklendiğinde boş gelmez veri ile gelir yeni url girince değiştirir.
        document.addEventListener('DOMContentLoaded',veriCek(x))
    </script>

deneyeceğim, teşekkürler