[英]how to call function and access in innerHTML
我想在更新页面显示存储在数据库中的数据。 我的问题是我想访问 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();
})
}
您可以在外部定义 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>
如果要预览上传的图像以进行更新:
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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.