时间戳

首页 > 解决方案 > 我想隐藏一个元素，但 document.getElementById() 为空

javascript - 我想隐藏一个元素，但 document.getElementById() 为空

问题描述

我正在构建一个页面，用户可以在其中将图像添加到他的个人资料中。我有三个要素。

  1. 尚无图像时的占位符。（上传框）
  2. 所选图像的预览 bij 文件输入 (preview-img)
  3. 预览数据库中已有的当前图像 (current-img)

我想根据情况隐藏或显示这些元素，但是当我想将要隐藏/显示的元素的 ID 放在 document.getElementById() 中时，它为空，而是参数的 console.log()显示它很好。

HTML：

<div class="pf-field img-field">
  <div class="uploadbox" id = "box1">
    <label for="file-upload1" class="custom-file-upload" >
      <i class="la la-cloud-upload"></i> <span>Upload Image</span>
    </label>
  </div>
  <label for="file-upload1" class="custom-file-upload" >
    <img id="img1" class="preview-img" src="placeholder.jpg" alt="your image" />
    <img class="current-img" src="{{user:img_1}}" alt="your image" />
  </label>
  <input name="image_1" type="file" title="file-upload1" class="hide" id="file-upload1" onchange="readURL(this, img1, box1);">
</div>

JS：

function readURL(input, preview, box) {       
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(preview)
        .attr('src', e.target.result);
      console.log(box); // Output: <div id="box1" class="uploadbox"> fotoimpressie:263:23
      console.log(preview); // Output: <img id="img1" class="preview-img" src="removed for readability" alt="your image"> fotoimpressie:264:23
      document.getElementById(box).style.display = "none";
      document.getElementById(preview).style.display = "block";
    }
    reader.readAsDataURL(input.files[0]);
  }
}

我在这里做错了什么？

标签： javascriptjqueryhtml

解决方案

您可以使用我测试过的这段代码。

function readURL(input, preview, box) {       
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $(preview).attr('src', e.target.result);
          document.getElementById("box1").style.display = "none";
          document.getElementById("img1").style.display = "block";
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
<div class="pf-field img-field">
      <div class="uploadbox" id = "box1">
	    <label for="file-upload1" class="custom-file-upload" >
          <i class="la la-cloud-upload"></i> <span>Upload Image</span>
        </label>
      </div>
      <label for="file-upload1" class="custom-file-upload" >
        <img id="img1" class="preview-img" src="placeholder.jpg" alt="your image" />
        <img class="current-img" src="{{user:img_1}}" alt="your image" />
      </label>
      <input name="image_1" type="file" title="file-upload1" class="hide" id="file-upload1" onchange="readURL(this, img1, box1);">
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐阅读