如何調用 function 並在 innerHTML 中訪問

Question

我想在更新頁面顯示存儲在數據庫中的數據。 我的問題是我想訪問 innerHTML 標簽來顯示圖像和任何其他數據，如

document.getElementById(visibilities).checked = true;

或者

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

順便說一句，我不知道如何訪問標簽或調用 function 並在 innerHTML 中加載。 請告訴我。 提前致謝。

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

您可以在外部定義 function 並通過名稱引用它。 這里我還使用innerHTML里面的按鈕數據集來存儲我在調用function時要訪問的id。

 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

如果要預覽上傳的圖像以進行更新：

 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>

如果要顯示數據庫中已存儲的圖像：

 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">