Javascript onclick 按钮

Question

我正在使用 HTML 和 javascript 创建一个表单。我需要根据单击前 2 个选项的 2 个按钮显示 div ID - 如果汽车年份是 2019 年并且汽车制造商是 ACURA，则显示 2019 年 Acura 车型的 div ID。

这里是代码 - 我真的坚持创建函数语句来检查以前单击的按钮并显示“模型”的新 div ID。有没有更好的办法？

<form>
<h4> Auto Insurance Quote </h4> <br>
<div id= "year">
<input type= "button" id="showform" 
value="2019" name="showform" 
onclick="showhideForm(this.value);"</button>
<input type= "button" id="b2018" value="2018" 
name="showform" 
onclick="showhideForm(this.value);"</button>
<input type= "button" id="showform" 
value="2017" name="showform" 
onclick="showhideForm(this.value);"</button>
<input type= "button" id="showform" 
   value="2016" name="showform" 
onclick="showhideForm(this.value);"</button>
</div>
</form>

<script type="text/javascript">
function showhideForm(showform) {
if (showform == "2019") {

 document.getElementById("div1").style.display 
  = 
 'block';

 document.getElementById("year").style.display 
  = 
 'none';

   }

    if (showform == "2018") {

 document.getElementById("div1").style.display 
 = 'block';

  document.getElementById("year").style.display 
   = 'none';
   }

      if (showform == "2017") {

  document.getElementById("div1").style.display 
 = 'block';

  document.getElementById("year").style.display 
  = 'none';
   }
    if (showform == "2016") {

  document.getElementById("div1").style.display 
   = 'block';


 document.getElementById("year").style.display 
 = 'none';
  }
  }


     </script>

     <div id="div1" style="display:none">
    <input type= "button" id="acura" 
   value="ACURA" name="showform" 
    onclick="myFunction()"</button>
    <input type= "button" id="showform" 
    value="AUDI" name="showform" 
    onclick="showhideForm(this.value);" 
   </button>
    <input type= "button" id="showform" 
   value="BMW" name="showform" 
   onclick="showhideForm(this.value);"</button>
   <input type= "button" id="showform" 
    value="BUICK" name="showform" 
    onclick="showhideForm(this.value);" 
     </button>

    </div>

      <div id= acura_2018 style="display:none">
        <input type= "button" id="showform" 
      value="ILX BASE" name="showform" 
     onclick="showhideForm(this.value);" 
     </button>
        <input type= "button" id="showform" 
      value="ILX PREMIUM" name="showform" 
        onclick="showhideForm(this.value);" 
         </button>
      <input type= "button" id="showform" 
        value="ILX PREMIUM STYLE" 
         name="showform" 
        onclick="showhideForm(this.value);" 
        </button>
      <input type= "button" id="showform" 
      value="ILX SPECIAL EDITION" 
       name="showform" 
        onclick="showhideForm(this.value);" 
        </button>

        </div>

       <script>


       function
      var 2018 
       =document.getElementById("b2018");
         var 2018 
      =document.getElementById("ACURA");

       b2018.onclick = function() 
       }

          </script>

Answer 1

欢迎道格。只是我能想到的几件事，您传递按钮值的函数可以将其存储为像这样的变量：

strYear = showform;
//You only needs these lines once:
document.getElementById("div1").style.display = 'block';
document.getElementById("year").style.display = 'none';

对模型及其功能做同样的事情：

strModel = showform;

那么如果在你的 div 之后：

var divIdentified = document.getElementById(strYear + strModel);

认为这就是你所追求的。除非您计划做其他事情，否则您不应该需要所有这些 if 语句。另外我会看看 switch 语句。当您确实需要使用大量 if 时，它会让您的代码看起来更整洁、更高效。

希望对你有所帮助