javascript - 在我的函数中构建我的条件不起作用。程序不想执行我的条件？

Question

在这个函数中，程序不想考虑我的 if 条件。我愚蠢地试图扭转ifand else if，但当然，这并没有改变任何东西。

我希望当输入值 < 到 12000 时，“amount6”的文本内容为“不合格！”。当输入值 >= 12000 时，段落“marginAmount6”的文本内容，即为运算结果。

HTML：

function calcAmount6() {
  var userAmount5 = document.getElementById("amount6").value;
  var userAmount6 = document.getElementById("amount7").value;
  var oneLevel1 = 12000;
  if (userAmount5 + userAmount6 < oneLevel1) {
    document.getElementById("marginAmount6").textContent = "Non-qualifié!";
  } else if (userAmount5 + userAmount6 >= oneLevel1) {
    document.getElementById("marginAmount6").textContent =
      Math.round(userAmount5 * 13 / 100) + (userAmount6 * 5 / 100) + "€";
  }
}

<p>CALCUL GAINS PILOTE QUALIFIE</p>
<p class="minimum2">(Points total minimum groupe conseillers + groupe animateurs = 12000 )</p>
<div class="blocklabel5">
  <label for="points amount" class="label6">Entrez points groupe 
    conseillers</label>
  <input type="number" class="amountEnter6" id="amount6">
</div>
<div class="blocklabel6">
  <label for="points amount" class="label7">Entrez points groupe 
    animateurs</label>
  <input type="number" class="amountEnter7" id="amount7">
  <input type="submit" value="Commissions pilote qualifié" id="submit7" class="submitEnter7" onclick="calcAmount6()">
</div>
<p id="marginAmount6" class="enterMargin6">0€&lt;/p>
</div>
</div>

标签： javascript

Answer 1

A）您使用<input type =" submit "...并且您的代码中没有表格；提交用于提交具有加载新页面作为响应的值的页面。

B)document.getElementById (" amount6 ​​"). Value;返回一个字符串 ** 并将一个字符串添加到一个字符串是一个字符串连接。ex "15" + "25" => "1525" 对于任何字符串 "hello" + "world" => "hello world"

C）更喜欢全局声明您的数据指针，这将防止解释器 JS 在每次单击时重新计算它们。

这是您清理后的代码：

const
  in_amount6      = document.getElementById("amount6"),
  in_amount7      = document.getElementById("amount7"),
  bt_submit7      = document.getElementById("submit7"),
  p_marginAmount6 = document.getElementById("marginAmount6"),
  oneLevel1       = 12000;


bt_submit7.onclick = function()
{
  let 
    userAmount5 = in_amount6.valueAsNumber,
    userAmount6 = in_amount7.valueAsNumber;

  if ( (userAmount5 + userAmount6) < oneLevel1)
  {
    p_marginAmount6.textContent = "Non-qualifié!";
  }
  else 
  {
    p_marginAmount6.textContent = Math.round(userAmount5 * 13 / 100) + (userAmount6 * 5 / 100) + "€";
  }
}

<p>CALCUL GAINS PILOTE QUALIFIE</p>
<p class="minimum2">(Points total minimum groupe conseillers + groupe animateurs = 12000 )</p>
<div class="blocklabel5">
  <label for="points amount" class="label6">Entrez points groupe conseillers</label>
  <input type="number" class="amountEnter6" id="amount6">
</div>
<div class="blocklabel6">
  <label for="points amount" class="label7">Entrez points groupe animateurs</label>
  <input type="number" class="amountEnter7" id="amount7">

  <input type="button" value="Commissions pilote qualifié" id="submit7" class="submitEnter7" >
</div>
<p id="marginAmount6" class="enterMargin6">0€&lt;/p>

正如我看到你的法国人：
Si on décompose l'instruction

var userAmount6 = document.getElementById("amount7").value;

a:
1) créer une variable globale

var userAmount6

à chaque fois qu'on clique sur le bouton, ce qui n'est pas très bien, car ce n'est pas une variable globale, elle est juste utilisée localement , donc il faut la declarer avec un let。

2)

document.getElementById("amount7")

=> demander à l'interpréteur JS de créer un pointeur sur l'élément DOM <input .. id="amount6">, a chaque fois qu'on clique sur le bouton, c'est à dire que l'interpréteur devra répéter autant de fois cette opération à chaque fois qu' on clique,
alors autant déclarer ce pointeur en amont une bonne fois pour toute et en le déclarant comme étant une constante ( const ), car comme ça l'interpréteur sait qu'il n'aura pas à vérifier à chaque fois qu'il s 'agit bien d'un pointeur sur un DOM ayant les bonnes propriétés désirées。ce que j'ai fait ainsi:

const
  in_amount6      = document.getElementById("amount6"),

le in_ est juste une regle d'écriture perso qui me permet de savoir que cela pointe vers un input

3)

.value;

=> utiliser le pointeur précédent et récupérer sa valeur textuelle。
Ce qu'en jargon on appelle une propriété ,(il y en a 1000 autres : la couleur de found, la fonte utilisée, etc...)
comme cet élément est déclaré comme étant un nombre <input type="number" ..il possède aussi la propriété : .valueAsNumber qui permet de récupérer sa valeur sous forme de nombre et non sous forme de string commme c'était le cas avant et qui te posait probleme。

une derniere 选择：aulieu d'écrire

var A=15; 
var B='xyy';
var C=document.getElementById('...;

on ecrit une seule fois varce qu indique bien qu'on demande à l'interpréteur JS de considerer tout ce qui suivra comme des variables, jusqu'à ce qu'il rencontre un point virgule。et la syntaxe de var, const et let utilisent toutes les simples virgules pour distinguer les différentes declarations。塞奎多恩

var A=15,B='xyy', C=document.getElementById('zID');

je les mets juste sur des lignes différentes pour que le code soit plus lisible

浇注器：

bt_submit7.onclick = function() { ... }

对应与替换

<input id="submit7" ... onclick="calcAmount6()">

le principe est de ne pas melanger le code javascript dans la partie body du html

j'ai pris soin de declarer en constante le pointeur bt_submit7sur cet élément DOM, et l'instruction

bt_submit7.onclick ...

permet de "dire" que la fonction qui suit sert à récupérer tout evenement clic sur cet élément du DOM。关于 utilisait cette 语法的前卫：

bt_submit7​.add​Event​Listener('click', function)

参考资料：
https://developer.mozilla.org/fr/docs/Web/API/GlobalEventHandlers/onclick
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener