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

Question

在这个函数中，程序不想考虑我的if条件。我愚蠢地尝试颠倒 if 和 else if，但当然，这不会改变任何东西。

我希望当输入值<到12000时，“amount6”的文本内容为“no-qualified!”。当输入值 >= 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€</p>
</div>
</div>

Answer 1

A)您使用<input type =" submit "...并且您的代码中没有任何形式； Submit用于提交页面，其值为加载新页面作为响应。

B) document.getElementById (" amount6 ​​"). Value;返回一个字符串**，字符串与字符串相加就是字符串连接。例如“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€</p>

我看到你是个法国人:
Si on 分解指令

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

在:
1) 创建全局变量

var userAmount6

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

2)

document.getElementById("amount7")

=> 需求者 à 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 declarer 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'光环验证者查克 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;

=> 使用前面的指针并恢复文本的值。
Ce qu'en on appelle une propriété 的行话，(il y en a 1000 autres : la couleur de folon, la fonte utilisée, 等等...)
Comme cet élément est déclaré comme étant un nombre <input type="number" ..拥有所有权:.valueAsNumber qui permet de récupérer sa valeur sous forme de nombre and non sous forme de string commme c'était le cas avant et qui te posait Probleme.

最后选择:au lieu d'écrire

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

关于 ecrit une seule fois var如果需要解释器 JS 来考虑变量，就可以解决这个问题。var、const et let的语法使用简单的virgules来区分不同的声明。ce qui donne

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 mélanger javascript 代码在 html 中的主体

j'ai 是常量指针的声明者 bt_submit7 DOM 元素及指令

bt_submit7.onclick ...

在 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