javascript 单击按钮时显示信息

jckbn6z7  于 2023-02-21  发布在  Java
关注(0)|答案(2)|浏览(184)

我需要以下方面的帮助。我需要在单击按钮时显示信息,目前是通过类来实现的。如何使函数在单击按钮时运行?

function mostrarProvincia(provincia) {

            console.log(provincia.value);
            if (provincia.value == 1) {
                document.getElementById('lima').classList.remove('d-none');
            } else {
                document.getElementByid('lima').classList.add('d-none');
            };};
.d-none {
            display: none;
        }
<div class="alinear_dropdown">

        <select id="provincia" onchange="mostrarProvincia(this)">
            <option value="0 selected"> Selecciona tu Provincia ...</option>
            <option value="1">LIMA</option>
        </select>
        
        <button style="padding: 20px 32px;
    width: 18rem;background-color:#DC241F;color: #FFFFFF;">BUSCAR</button>

        <div id="lima" class="d-none">
            <div style="background-color:#F1F1F1;    border-radius: 1rem;">
                <h3 style="padding: 25px 10px 0px 20px;">Automotores Yoshival Huaraz</h3>
                <a href="https://goo.gl/maps/hFrzeSaDVmXfNQiv8">
                    <p style="padding: 0px 10px 0px 20px;">Av. Monterrey S/N (Carretera Huaraz Monterrey). </p>
                </a>
                <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
                    <p>+56 9 9711 8500</p>
                    <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
                </div>
                <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
                    <p>+56 9 9711 8500</p>
                    <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
                </div>
            </div>
        </div>

我需要这个代码的帮助

klr1opcd

klr1opcd1#

<select>字段中删除onchange,并通过函数中的变量引用<select>字段。将函数添加为按钮的onclick处理程序。

function mostrarProvincia() {

  const provincia = document.getElementById('provincia');
  if (provincia.value == 1) {
    document.getElementById('lima').classList.remove('d-none');
  } else {
    document.getElementById('lima').classList.add('d-none');
  };
};
.d-none {
  display: none;
}
<div class="alinear_dropdown">

  <select id="provincia">
    <option value="0 selected"> Selecciona tu Provincia ...</option>
    <option value="1">LIMA</option>
  </select>

  <button style="padding: 20px 32px;
    width: 18rem;background-color:#DC241F;color: #FFFFFF;" onclick="mostrarProvincia()">BUSCAR</button>

  <div id="lima" class="d-none">
    <div style="background-color:#F1F1F1;    border-radius: 1rem;">
      <h3 style="padding: 25px 10px 0px 20px;">Automotores Yoshival Huaraz</h3>
      <a href="https://goo.gl/maps/hFrzeSaDVmXfNQiv8">
        <p style="padding: 0px 10px 0px 20px;">Av. Monterrey S/N (Carretera Huaraz Monterrey). </p>
      </a>
      <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
        <p>+56 9 9711 8500</p>
        <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
      </div>
      <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
        <p>+56 9 9711 8500</p>
        <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
      </div>
    </div>
  </div>
6vl6ewon

6vl6ewon2#

从select中删除onchange属性。
将js代码更改为以下js代码。

const selectElement = document.querySelector("select");
const button = document.querySelector("button");
button.addEventListener("click",mostrarProvincia)
function mostrarProvincia() {

            console.log(selectElement.value);
            if (selectElement.value == 1) {
                document.getElementById('lima').classList.remove('d-none');
            } else {
                document.getElementById('lima').classList.add('d-none');
            };};
.d-none {
            display: none;
        }
<div class="alinear_dropdown">

        <select id="provincia">
            <option value="0 selected"> Selecciona tu Provincia ...</option>
            <option value="1">LIMA</option>
        </select>
        
        <button style="padding: 20px 32px;
    width: 18rem;background-color:#DC241F;color: #FFFFFF;">BUSCAR</button>

        <div id="lima" class="d-none">
            <div style="background-color:#F1F1F1;    border-radius: 1rem;">
                <h3 style="padding: 25px 10px 0px 20px;">Automotores Yoshival Huaraz</h3>
                <a href="https://goo.gl/maps/hFrzeSaDVmXfNQiv8">
                    <p style="padding: 0px 10px 0px 20px;">Av. Monterrey S/N (Carretera Huaraz Monterrey). </p>
                </a>
                <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
                    <p>+56 9 9711 8500</p>
                    <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
                </div>
                <div style="display: flex;align-items: center;padding: 0px 10px 0px 20px;">
                    <p>+56 9 9711 8500</p>
                    <a href="tel:+56 9 9711 8500" style="padding-left: 20px;
    padding-right: 20px;color:#DC241F;font-weight: 900;">Llamar</a>
                </div>
            </div>
        </div>

还有一个错误,您在if else的else部分中写错了getelementbyid的拼写

相关问题