如何调用 function 并在 innerHTML 中访问

Question

I'd like to show data which stored in DB at update page. My problem is that I wanna access innerHTML tag to show images and any other data like

document.getElementById(visibilities).checked = true;

or

for (i=0; i<files.length; i++) {
                var image = new Image();
                image.src = files[i];
                image.height = 100;
                display.appendChild(image); 
            } 

Btw, I don't know how to access tags or call function with onload in innerHTML. Please let me know. Thanks in advance.

function getData(id) {
    var path  = '/project/update/' + id;

    restfull.get({
        path: path
    }, function(err, data) {
        if(err) return;
        var title = data.title;
        var descriptions = data.descriptions;
        var visibilities = data.visibilities;
        var files = data.image;
        
    
        
        const modal =  new window.Modal({
            modalContainerId: 'updateModal'
            , modalTitleText: `Update Your Project`
            , modalContentsInnerHTML: ` <form method="put" id="updateform" enctype="multipart/form-data" onload='getData()'>
          <input type="radio" name="visibilities" value="public" id="public">Public
          <input type="radio" name="visibilities" value="private" id="private">Private
          <input type="radio" name="visibilities" value="unlisted" id="Unlisted">Unlisted <br>
          <label for="title">Project Title</label>
          <input type="text" name="title" id="title" required value="${title}"><br>
          <label for="descriptions">Description</label>
          <input type="text" name="descriptions" id="descriptions" required value="${descriptions}"><br>
          <label for="multi_image">Images/ Videos
          <input type="file" id="multi_image" name="multi_image" multiple onchange='previewImages()'><br>
          <div id="display"></div>
          <div id="projectpreview"></div>
          
        </form>`
            , modalSubmitBtnText: 'Update'
            , modalSubmitBtnAction: function(){updatesubmit(data._id)}
            , modalCancelBtnText: 'Cancel'
    
            , modalCancelBtnAction: function() {
                modal.destroy();
            }
        })
        modal.show();
    })
}

Answer 1

You can define the function outside and reference it by name. Here I also use the dataset of the button inside the innerHTML to store the id I want to access when the function is called.

 const id = 1 document.getElementById('container').innerHTML = ` <button data-selected="${id}" onclick="foo(event)">Click Me</button> ` const foo = ({target}) => console.log('selected id:', target.dataset.selected)

 <div id="container"></div>

Answer 2

If you want to preview the uploaded image for update:

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#preview').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); // convert to base64 string } } $("#imgInput").change(function() { readURL(this); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form runat="server"> <input type='file' id="imgInput" /> <img id="preview" src="#" alt="your image" /> </form>

If you want to display an already stored image from database:

 var image = document.getElementById('preview'); image.src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="; image.width=100; image.height=100; image.alt="here should be some image";

 <img id="preview">