这个程序应该做的是首先使用范围输入你想要猜出多少个元素然后它会显示一个随机元素形成一个json列表你必须猜测valnce然后它会加载另一个然后你继续好的,当我运行此代码时,一切正常,直到您单击提交按钮两次。当我第一次单击提交按钮时它会顺利但是第二次程序在第41行运行if但它也在else中运行代码,如果你提交更多次,它将运行警报越来越多次。 我已经尝试过其他方式,比如将所有内容放入for,但它仍然运行代码,我不想这样做。
const $ = require('jquery');
let elementoActual;
let valorPositivoCorrecto;
let valorNegativoCorrecto;
let valorCuadroNegativo;
let valorCuadroPositivo;
// Button on click add the element
$(document).ready(function() {
$("#startButton").click(function() {
$(".hide").hide();
let questionHTML = '<div class="elementoQuimico"><img id="imgElemnt" src="" alt=""></div>' +
'<div class="valenciasElemento">' +
'<input type="text" class="valorPositivo" placeholder="Valencias positivas">' +
'<input type="text" class="valorNegativo" placeholder="Valencias negativas">' +
'</div>' +
'<button class="submitButtonElement">SUBMIT</button>';
$(".questions").append(questionHTML);
putAnElement();
}); //onclick ends
}) //ready ends
function putAnElement() {
let numb = $("#textInput").val();
let counter = 0;
$.getJSON("../../json/valencias.json", function(data) {
let numeroDeElemento = Math.floor(Math.random() * 3);
elementoActual = data[numeroDeElemento];
valorNegativoCorrecto = data[numeroDeElemento].valenciasNegativas;
valorPositivoCorrecto = data[numeroDeElemento].valenciasPositivas;
//$("#imgElemnt").attr( "src" , elementoActual.img);
$("#imgElemnt").attr("alt", elementoActual.name);
$("#imgElemnt").attr("width", "200px");
$("#imgElemnt").attr("height", "200px");
alert(numb);
$(".submitButtonElement").click(function() {
valorCuadroNegativo = $(".valorNegativo").val();
valorCuadroPositivo = $(".valorPositivo").val();
$(".valorNegativo").val("");
$(".valorPositivo").val("");
if (valorCuadroNegativo === valorNegativoCorrecto &&
valorCuadroPositivo === valorPositivoCorrecto) {
alert("correcto");
counter++;
alert(counter);
if (counter != numb){
putAnElement();
} else {
alert("ya");
}
} else {
alert("incorrecto");
counter++;
alert(counter);
if (counter != numb) {
putAnElement();
} else {
alert("ya");
}
}
});
}); //getJSON ends
};
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabla periodica</title>
<link rel="stylesheet" href="../../css/periodic-table.css">
</head>
<body>
<div class="wrapper">
<div class="hide">
<h1>TABLA PERIODICA</h1>
<img src="../../img/tabla-valencias.png">
<div class="buttons">
<button id="startButton">EMPEZAR</button>
<form id="submit-tabla">
<label for="rangeInput"></label><input type="range" name="amountRange" id="rangeInput" min="10" max="30" value="20" oninput="this.form.amountInput.value=this.value" />
<label for="textInput"></label><input type="number" name="amountInput" id="textInput" min="10" max="30" value="20" oninput="this.form.amountRange.value=this.value" />
</form>
</div>
</div>
<div class="questions">
</div>
</div>
<footer>
2017 © Nestor and Diego
</footer>
<script src="chemistry.js"></script>
</body>
</html>
&#13;
[
{
"name":"hidrogeno",
"valenciasNegativas":"-1",
"valenciasPositivas":"1",
"img":"img/Hidrogeno.svg"
},
{
"name":"litio",
"valenciasNegativas":"",
"valenciasPositivas":"1",
"img":"img/Litio.svg"
},
{
"name":"sodio",
"valenciasNegativas":"",
"valenciasPositivas":"1",
"img":"img/Sodio.svg"
}
]