时间戳

首页 > 解决方案 > 如何在特定条件下显示按钮？

javascript - 如何在特定条件下显示按钮？

问题描述

我是学习 JavaScript 的学生。

对于我的私人项目，如果客户选择好或非常好，我正在尝试创建一个链接到谷歌评论页面的调查。如果客户选择平均或以下，则进入下一步，人们可以填写表格。

但是，我在按钮功能上遇到了麻烦。我尝试了“下一步”按钮并取决于客户的回答，该按钮使用 if 和 else 执行上述操作。

function buttonConditions() {
  var x = document.getElementsByName("question_1");
  var y = document.getElementsByName("process");
  var z = document.getElementsByName("forward");
  if (x === "good_1"
    or "very_good_1") {
    y.style.display = "block";
  } else {
    z.style.display = "block";
  }
}
<h3 class="main_question">How was the service provided?</h3>

<div class="review_block_smiles">
  <ul class="clearfix">
    <li>
      <div class="container_smile">
        <input type="radio" id="very_bad_1" name="question_1" class="required" value="Very bad" onchange="getVals(this, 'question_1');">
        <label class="radio smile_1" for="very_bad_1"><span>Very bad</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="bad_1" name="question_1" class="required" value="Bad" onchange="getVals(this, 'question_1');">
        <label class="radio smile_2" for="bad_1"><span>Bad</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="average_1" name="question_1" class="required" value="Average" onchange="getVals(this, 'question_1');">
        <label class="radio smile_3" for="average_1"><span>Average</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="good_1" name="question_1" class="required" value="Good" onchange="getVals(this, 'question_1');">
        <label class="radio smile_4" for="good_1"><span>Good</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="very_good_1" name="question_1" class="required" value="Very Good" onchange="getVals(this, 'question_1');">
        <label class="radio smile_5" for="very_good_1"><span>Very Good</span></label>
      </div>
    </li>
  </ul>

  <button type="submit" name="process" class="submit" style="display:none"><a href="www.google.com">Submit</a></button>

  <button> type="button " name="forward " class="forward " style="display:none ">Next</button>

我对 php 部分和其他部分没问题，但只是那些按钮没有按我的预期工作。

标签： javascripthtmlforms

解决方案

尝试这个：

function getRadioGroupValue(radioGroupName) {
    let selectedOption = Array.from(document.getElementsByName(radioGroupName))
    .find((option) => option.checked);
  
  if (selectedOption) {
    return selectedOption.value;
  } else {
    return "";
  }
}

function buttonConditions() {
  var x = getRadioGroupValue("question_1");
  var y = document.getElementsByName("process")[0];
  var z = document.getElementsByName("forward")[0];
  
  if (x === "good_1" || x === "very_good_1") {
    y.style.display = "block";
  } else {
    z.style.display = "block";
  }
}
<h3 class="main_question">How was the service provided?</h3>

<div class="review_block_smiles">
  <ul class="clearfix">
    <li>
      <div class="container_smile">
        <input type="radio" id="very_bad_1" name="question_1" class="required" value="Very bad" onchange="buttonConditions();">
        <label class="radio smile_1" for="very_bad_1"><span>Very bad</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="bad_1" name="question_1" class="required" value="Bad" onchange="buttonConditions();">
        <label class="radio smile_2" for="bad_1"><span>Bad</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="average_1" name="question_1" class="required" value="Average" onchange="buttonConditions();">
        <label class="radio smile_3" for="average_1"><span>Average</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="good_1" name="question_1" class="required" value="good_1" onchange="buttonConditions();">
        <label class="radio smile_4" for="good_1"><span>Good</span></label>
      </div>
    </li>
    <li>
      <div class="container_smile">
        <input type="radio" id="very_good_1" name="question_1" class="required" value="very_good_1" onchange="buttonConditions();">
        <label class="radio smile_5" for="very_good_1"><span>Very Good</span></label>
      </div>
    </li>
  </ul>

  <button type="submit" name="process" class="submit" style="display:none"><a href="www.google.com">Submit</a></button>

  <button type="button " name="forward" class="forward " style="display:none ">Next</button>
  </div>

jsfiddle

解释

这个条件：

if (x === "good_1"
  or "very_good_1") {
    y.style.display = "block";
} else {
    z.style.display = "block";
}

在控制台中产生此错误：

Uncaught SyntaxError: missing ) after condition

不遵循 Javascript 的语法：or运算符由符号完成||（有关更多信息，请参见此处）。另外，不能写

if (x == y || z)

检查是否x等于y或 to z。相反，你应该写

if (x == y || x == z)

document.getElementsByName("...")不返回单个元素，而是返回一个NodeList。因此，要获取元素y和z，您应该获取该数组的第一个元素：

var y = document.getElementsByName("process")[0];
var z = document.getElementsByName("forward")[0];

（注意尾随[0]）。

另请注意，这question_1是一个广播组。要获得无线电组的价值（在 vanilla Javascript 中），您不能简单地做

let x = document.getElementsByName("myRadioGroup");
console.log(x.value);

相反，您应该检查 NodeList 的每个元素并获取checked元素的值（如果有）。您可以使用此功能：

function getRadioGroupValue(radioGroupName) {
    let selectedOption = Array.from(document.getElementsByName(radioGroupName))
    .find((option) => option.checked);
  
  if (selectedOption) {
    return selectedOption.value;
  } else {
    return "";
  }
}

let x = getRadioGroupValue("question_1");

您的 HTML 代码中也有一些错误。标签未正确关闭，并且您缺少标签。

onchange="..."此外，您正在调用我们事件中未定义的函数。

编辑

要将用户导航到下一步，您应该将您的替换<button name="forward">为锚点（例如，指向下一页的链接）：

<a href="next-step.html" name="forward" class="forward " style="display:none ">Next</a>

请参阅此处以获取更新的小提琴。

推荐阅读