时间戳

首页 > 解决方案 > 使用 javascript 和烧瓶的基本 javascript 隐藏和显示图像

javascript - 使用 javascript 和烧瓶的基本 javascript 隐藏和显示图像

问题描述

我试图通过单击按钮来显示和隐藏图像，我在控制台中测试了代码，一切正常，只是显示和隐藏不起作用：

HTML

<input type="text" class="rounded" name="fname" id = "stock_check">
<img id = "my_image" style= "display: hide;" src="{{url_for('static', filename='download.png')}}" alt="greencheck" width="25" height="25"/>

<button onclick="myFunction()">Click Me</button>

Javascript

function myFunction() {
  var x = document.getElementById("stock_check").value;
  if (x === 'W'){
    document.getElementById('my_image').style.display = 'show';
    console.log('if_state');
    console.log(x);
  } 
  else{
    document.getElementById('my_image').style.display = 'hide';
    console.log('else_state');
    console.log(x);
  }
}

标签： javascript

解决方案

我在等待的时候想通了，我想我会分享，因为我以前没有看到这个。

HTML

<input type="text" class="rounded" name="fname" id = "stock_check">
<img id = "my_image" style= "visibility:hidden;" src="{{url_for('static', filename='download.png')}}" alt="greencheck" width="25" height="25"/>

<button onclick="myFunction()">Click Me</button>

Javascript

function myFunction() {
  var x = document.getElementById("stock_check").value;
  if (x === 'W'){
    document.getElementById('my_image').style.visibility = "visible";
    console.log('if_state');
    console.log(x);
  } 
  else{
    document.getElementById('my_image').style.visibility = "hidden";
    console.log('else_state');
    console.log(x);
  }
}

我将样式更改为可见性，我认为显示给我带来了问题，因为我在烧瓶中使用图像。

显然你不需要额外的 console.log()，那是我检查它是否是 if 语句的时候。

推荐阅读