javascript - 单击按钮时如何在同一页面中显示表单

Question

我的页面上有一个表单，并将其显示为无。并且在我想要的页面中有一个按钮，当单击该按钮时，表单将显示。

我怎样才能做到这一点？

 <button type="button"  class="btn btn-primary add-city">اضافه مدينة جديدة +</button>

表单代码是这样的

<div id="forma">
   <div class="form-head">
      <p id="add-city">+اضافة المدينة</p>
      <i class="fa fa-times-circle close" aria-hidden="true"></i>
   </div>
   <form class="">
      <div class="container">
         <div class="row">
            <div class="col-md-6">
               <div class="form-group">
                  <label>الدولة<span>*</span></label>
                  <select class="form-control">
                     <option>اختر الدوله </option>
                  </select>
               </div>
               <div class="form-group">
                  <label>اسم المدينه(عربي)<span>*</span></label>
                  <input type="text" class="form-control" id="email">
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group ">
                  <label>المحافظة<span>*</span></label>
                  <select class="form-control">
                     <option>اختر المحافظه </option>
                  </select>
               </div>
               <div class="form-group">
                  <label>اسم المدينه(انجليزي)</label>
                  <input type="text" class="form-control" id="email">
               </div>
            </div>
         </div>
      </div>
   </form>
   <div class="form-footer">
      <button type="button" class="btn btn-primary">ارسال</button>
      <button type="button" class="btn btn-secondary">الغاء</button>
   </div>
</div>

我制作了一个名为forma的id的div，这样我就可以在javascript中调用它。但我不知道正确的方法。

Answer 1

您可以向按钮添加 onclick 属性，以将显示更改为阻止。

onclick="document.getElementById('forma').style.display = 'block'"