How to make image give her name to text field then edit the name and save it? Plus delete button should remove picture

Question

This one is very tricky and I cant imagine how to solve it... Request was "Double click on picture, then you get picture name in to text field. There you can change name and save it with button. Also there's another button which clicked you delete the picture."

At this moment I dont have much, it's just a guess what it should look like..

function rodytiViduryje(pav){
    var paveikslas=document.getElementById("jap");
    paveikslas.src=pav.src;

    var aprasymas=document.getElementById("apr");
    aprasymas.value=pav.title;          
    lastph=pav;
}

function keistiAprasyma(){
    var NA=document.getElementById("apr");
    lastph.title=NA.value;
}

function trintiPaveiskla(){
    lastph.remove();        
}

<div class="ketvirtas">
    <!-- THIS PICTURE -->
    <img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt=japonija class="b" style="width:780px;height:480px">
</div>

<div class="penktas">
    <div class="aprasymas">  <!-- Buttons-->
        <label for="tekstas"> 
            <b>Paveikslo aprasymas</b> 
        </label><br/>
        <input type="text" id="apr" />
        <button id="saugoti" onclick="keistiAprasyma()">Išsaugoti aprašymą</button><br/>
        <br>
        <button onclick="trintiPaveiksla()">Trinti iš galerijos</button><br/>
    </div>
</div>

Please share your ideas! :)

Answer 1

JS could be something like this (also made small changes to HTML):

document.addEventListener("DOMContentLoaded", function(event) {
        let img = document.querySelector('#jap');
        let descriptionInput = document.querySelector('#apr');
        let saveButton = document.querySelector('#saugoti');
        let deleteButton = document.querySelector('#trinti');

        img.addEventListener('dblclick', function (e){
            console.log
            descriptionInput.value = this.alt;
        });

        saveButton.addEventListener('click', function(){
            img.alt = descriptionInput.value;
        });

        deleteButton.addEventListener('click', function(){
            img.remove();
        });
    });

<div class="ketvirtas">
        <!-- THIS PICTURE -->
        <img id="jap" src="https://media.cntraveler.com/photos/60596b398f4452dac88c59f8/16:9/w_3999,h_2249,c_limit/MtFuji-GettyImages-959111140.jpg" alt="japonija" class="b" style="width:780px;height:480px" />
    </div>
    
    <div class="penktas">
        <div class="aprasymas">  <!-- Buttons-->
            <label for="tekstas"> 
                <b>Paveikslo aprasymas</b> 
            </label><br/>
            <input type="text" id="apr" />
            <button id="saugoti">Išsaugoti aprašym?</button><br/>
            <br>
            <button id="trinti">Trinti iš galerijos</button><br/>
        </div>
    </div>

My advice for future endeavours: scale your tasks to smaller ones. This will give you more valid results. Also you'll be able to learn while combining those multiple solutions to the one you need. I.e., your searches for this task could be:

• Javascript double click event
• Javascript get images' alt value
• Javascript set images' alt value
• Javascript remove DOM element