<div>提交表格后不显示</div><div id="text_translate"><p>我正在尝试使用 FLask 并使用简单的 HTML 和 CSS 为前端构建一个 Webapp，因为我是新手。现在我面临的问题是<div class="blocking">在我提交表单后没有显示，但<div class="spinner">工作正常。下面是代码</p><pre class="lang-html prettyprint-override"> {% extends "layout.html" %} {% block content %} <body> <form role="form" action="/reviewrequest/{{ value }}" method="POST" onSubmit="return validateForm():"> <table>............. </table> <input type="submit" name="btn" value="Submit" class="btn btn-success success" /> <div id="blocking" class="blocking"> <div id="spinner" class"center loading"></div></div> </form> <script> function validateForm(){ document.getElementById("blocking").style.display = = 'block'; document.getElementById("spinner").style.display = = 'block'; } </script> </body> {% endblock %}</pre><p> 注意：相同的 CSS 代码适用于另一个 HTML 文件。</p><p> 编辑：添加了 '.style.display' 但仍然相同，只有微调器显示</p><pre class="lang-css prettyprint-override"> <style type="text/css"> #spinner { display: none; }.loading { border: 2px solid #ccc; width: 60px; height: 60px; border-radius: 50%; border-top-color: #1ecd97; border-left-color: #1ecd97; animation: spin 1s infinite ease-in; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #blocking { display: none; }.blocking{ width: 100%; height: 100%; background: rgba(0,0,0,0.75) no repeat center center; } </style></pre></div>

Question

I am trying to build a Webapp using FLask and using simple HTML and CSS for the frontend as I am new to this.我正在尝试使用 FLask 并使用简单的 HTML 和 CSS 为前端构建一个 Webapp，因为我是新手。 Now the problem I am facing is that the <div class="blocking"> is not showing after I submit the form but the <div class="spinner"> is working fine.现在我面临的问题是<div class="blocking">在我提交表单后没有显示，但<div class="spinner">工作正常。 Below is the code下面是代码


{% extends "layout.html" %}
{% block content %}
 
 <body>

  <form role="form" action="/reviewrequest/{{ value }}" method="POST" onSubmit="return validateForm():">

     <table> ............. </table>

     <input type="submit" name="btn" value="Submit" class="btn btn-success success" />
     <div id="blocking" class="blocking">
     <div id="spinner" class"center loading"></div></div>
  </form>

<script>
 function validateForm(){
     document.getElementById("blocking").style.display =  = 'block';
     document.getElementById("spinner").style.display =  = 'block';
 }
</script>

</body>
{% endblock %}

NOTE: The same CSS code working on another HTML file.注意：相同的 CSS 代码适用于另一个 HTML 文件。

EDIT: Added '.style.display' but still its same only the spinner is showing编辑：添加了 '.style.display' 但仍然相同，只有微调器显示


<style type="text/css">

    #spinner {
        display: none;
    }

    .loading {
        border: 2px solid #ccc;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border-top-color: #1ecd97;
        border-left-color: #1ecd97;
        animation: spin 1s infinite ease-in;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

  #blocking {
         display: none;
   }
  
  .blocking{
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.75) no repeat center center;
  }
 
</style>

Answer 1

Try using document.getElementById("blocking").style.display = "block";尝试使用document.getElementById("blocking").style.display = "block"; to set the display property of the specified Element.设置指定元素的显示属性。

问题描述

1 个解决方案

解决方案1
1 2021-03-16 09:04:58

问题描述

1 个解决方案

解决方案1 1 2021-03-16 09:04:58

解决方案1
1 2021-03-16 09:04:58