Próbuje wyświetlić obrazek używając JavaScript i HTML - gdzie błąd?

pytanie zadane 17 kwietnia 2019 w JavaScript przez Kubs Mądrala (5,190 p.)
edycja 17 kwietnia 2019 przez Kubs

Witajcie,

jak w tytule, gdzie błąd?

!DOCTYPE html>
<html>

<head>

</head>

<body>

    <script>

        const image = new Image (200,300);
        newImage.src = "fertilization.jpg"

        document.querySelector('body').appendChild(newImage);

        var element = document.getElementById('fertilization.jpg');
        element.style.opacity = "0.9";
        element.style.filter  = 'alpha(opacity=90)'; 
        
        
        </script>



</body>

</html>

Po poprawkach

<body>

    <img id="myImage" src="fertilization.jpg">
    
    <script>

        const image = new Image (200,300);
        image.src = "fertilization.jpg";

        var element = document.getElementById('myImage');
        element.style.opacity = "0.9";
        element.style.filter  = 'alpha(opacity=90)'; 

        document.body.appendChild(element);
        
        
        </script>



</body>

3 odpowiedzi

odpowiedź 17 kwietnia 2019 przez pablop76 VIP (123,180 p.)

Instancję stworzoną za pomocą konstruktora Image zapisałeś w zmiennej image. Więc adres powinieneś przypisać do właściwości src tej instancji. getElementById() jako argument powinien dostać id elementu html , w którym ma być wyświetlony ten obrazek. Brakuje dodania tego obrazka do obiektu zapisanego jako element, np. za pomocą metody appendChild()

komentarz 17 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Witaj,

dzięki. Uaktualniłem post ale wciąż coś nie tak. Zerknij proszę.

komentarz 18 kwietnia 2019 przez pablop76 VIP (123,180 p.)
edycja 18 kwietnia 2019 przez pablop76

<div id="myImage"></div>

const image = new Image ();
image.src = "https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto/gigs/105040166/original/a068aa0bf723f101aea775be086bf91be5debc12/solve-html-css-js-or-js-library-problems.png";
var element = document.getElementById('myImage');
element.style.opacity = "0.9";
element.style.filter  = 'alpha(opacity=90)'; 
element.appendChild(image);

<img id="myImage" src="fertilization.jpg">

To ma być element do, którego wstawisz img a nie img, bo przecierz img tworzysz w js. Czyli np. pusty div o id myImage

document.body.appendChild(element);

Jeżeli chcesz umieścić obrazek w body to tak, ale jeżeli w pobranym elemencie strony to jest to ten element, który pobrałeś wcześnie za pomocą getElementById().

I jako argument podajesz co chcesz umieścić jako ostatnie dziecko tego elementu czyli Twój obrazek img czyli image (nie element)

komentarz 18 kwietnia 2019 przez Kubs Mądrala (5,190 p.)

Działa, dziękuję serdecznie.

odpowiedź 18 kwietnia 2019 przez Xevrrer Obywatel (1,640 p.)
edycja 18 kwietnia 2019 przez Xevrrer

<body>
    <img id="myImage" src="fertilization.jpg">
     //utworzyłeś element w HTML, więc jest w DOM
    <script>
       //const image = new Image (200,300);
       //image.src = "fertilization.jpg";
        
       //powyższy element już istnieje, dwie linijki wyżej nie potrzebne
        var element = document.getElementById('myImage');
        element.style.opacity = "0.9";

       //element.style.filter  = 'alpha(opacity=90)'; 
       // pierwszy styl wystarczy

       //document.body.appendChild(element);
       //juz istnieje, nie ma potrzebny dołączania go
        </script>
</body>

Sposób z pobraniem i obróbką elementu

<body>
 
    <img id="myImage" src="fertilization.jpg">
       <script>
        var element = document.getElementById('myImage');
        element.style.opacity = "0.9";
       </script>
</body>

Sposób z dynamicznym utworzeniem elementu i wstawieniem go w HTML

<body>
    <script>
        const myImage = new Image (200,300);
        myImage.src = "fertilization.jpg";
        myImage.style.opacity = "0.9";
        document.body.appendChild(myImage);
   </script>
</body>

//edit pablop mnie wyprzedził w komentarzu, pozdrawiam :p