• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
718 wizyt
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

+3 głosów
odpowiedź 17 kwietnia 2019 przez pablop76 VIP (123,060 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,060 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);

1. 

<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

2. 

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.
+1 głos
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

komentarz 18 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Dziękuje, bardzo pomocne. Dobrze wytłumaczone.
0 głosów
odpowiedź 17 kwietnia 2019 przez Hasira Bywalec (2,100 p.)

Zapomniałeś zamknąć element

newImage.src = "fertilization.jpg";

var element id to nie src. Link

komentarz 17 kwietnia 2019 przez Kubs Mądrala (5,190 p.)
Zerknij proszę po uaktualnieniu na pierwszy post.

Podobne pytania

0 głosów
2 odpowiedzi 225 wizyt
0 głosów
1 odpowiedź 1,676 wizyt
pytanie zadane 8 sierpnia 2018 w JavaScript przez Jumpeq Początkujący (270 p.)
0 głosów
2 odpowiedzi 140 wizyt
pytanie zadane 21 stycznia 2021 w JavaScript przez Kubs Mądrala (5,190 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...