Javascript onclick按钮

Question

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

这里是代码-我真的很想创建函数语句，以检查是否单击了先前的按钮并显示“ model”的新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

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

int _radioValue = 0;
int _answer = 2;
void _handleRadioValueChange(int value) {
  setState(() {
    _radioValue = value;
  });
}

Scaffold(
  appBar: AppBar(
    title: Text('Question #1'),
    backgroundColor: Colors.teal,
  ),
  body: ListTileTheme(
    child: ListView(
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(20.0),
          margin: EdgeInsets.all(10.0),
          color: Colors.tealAccent,
          child: Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor laoreet volutpat. Suspendisse malesuada ante. ',
            textAlign: TextAlign.center,
          ),
        ),
        RadioListTile(
          title: Text('Option #1'),
          value: 0,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #2'),
          value: 1,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #3'),
          value: 2,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #4'),
          value: 3,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RadioListTile(
          title: Text('Option #5'),
          value: 4,
          groupValue: _radioValue,
          onChanged: _handleRadioValueChange,
        ),
        RaisedButton(
          child: Text('Show Answer'),
          onPressed: (){},
          color: Colors.tealAccent,
          splashColor: Colors.teal,
        ),
      ],
    ),
  ),
);

对模型执行相同的操作，并起作用：

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

然后在您的div之后执行：

strModel = showform;

这就是你所追求的。除非您计划进行其他操作，否则您不需要所有这些if语句。我还要看看switch语句。当您确实需要使用大量ifs时，它将使您的代码看起来更整齐，更高效。

希望这对您有所帮助