मैं जावास्क्रिप्ट में एक नौसिखिया हूं और एमएमए स्कोर कर रहा हूं, मैं जानना चाहता हूं कि मैं परिणाम 1 रेड के बदले हुए मूल्य तक कैसे पहुंच सकता हूं।

<span><a id="result1Red">0</a></span>

जिसे उसके संबंधित कार्य को सक्रिय करने वाले बटनों में से किसी एक को चुनकर बदला जाता है:

function tenRed1() {
  var i = 10;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function nineRed1() {
  var i = 9;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function eightRed1() {
  var i = 8;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

जब मैं "आंतरिक HTML" के साथ प्रयास करता हूं तो यह 0 (प्रारंभिक मान) देता है, न कि निर्धारित मान। मुझे अन्य इनपुट के साथ जोड़ने और कुल परिणाम प्राप्त करने के लिए इस मान की आवश्यकता है।

पूरा कोड:

// Round 1
function tenRed1() {
  var i = 10;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function nineRed1() {
  var i = 9;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function eightRed1() {
  var i = 8;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function tenBlue1() {
  var i = 10;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
};

function nineBlue1() {
  var i = 9;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
};

function eightBlue1() {
  var i = 8;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
}


// Round 2
function tenRed2() {
  var i = 10;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function nineRed2() {
  var i = 9;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function eightRed2() {
  var i = 8;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function tenBlue2() {
  var i = 10;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};

function nineBlue2() {
  var i = 9;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};

function eightBlue2() {
  var i = 8;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};


// Round 3
function tenRed3() {
  var i = 10;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function nineRed3() {
  var i = 9;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function eightRed3() {
  var i = 8;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function tenBlue3() {
  var i = 10;
  result3Blue += 1*i;
  if (result3Blue > 10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};

function nineBlue3() {
  var i = 9;
  result3Blue += 1*i;
  if (result3Blue > 10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};

function eightBlue3() {
  var i = 8;
  result3Blue += 1*i;
  if (result3Blue>  10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};
<html>
<head>
	<title>MMAScore Beta</title>
	<link rel="styleesheet" type="text/css" href="style/style.css">
</head>
<body>

<header>
	<h1>mmaScore 0.1 Version</h1>
</header>

<!-- Round 1 -->
<div class="roundOne">
	<button type="button" onclick="eightRed1()">8</button>
	<button type="button" onclick="nineRed1()">9</button>
	<button type="button" onclick="tenRed1()">10</button>
	<span><a id="result1Red">0</a></span> - 
	<span><a id="result1Blue">0</a></span>
	<button type="button" onclick="tenBlue1()">10</button>
	<button type="button" onclick="nineBlue1()">9</button>
	<button type="button" onclick="eightBlue1()">8</button>
</div>
<!-- Round 2 -->
<div class="roundTwo">
	<button type="button" onclick="eightRed2()">8</button>
	<button type="button" onclick="nineRed2()">9</button>
	<button type="button" onclick="tenRed2()">10</button>
	<span><a id="result2Red">0</a></span> - 
	<span><a id="result2Blue">0</a></span>
	<button type="button" onclick="tenBlue2()">10</button>
	<button type="button" onclick="nineBlue2()">9</button>
	<button type="button" onclick="eightBlue2()">8</button>
</div>
<!-- Round 3 -->
<div class="roundThree">
	<button type="button" onclick="eightRed3()">8</button>
	<button type="button" onclick="nineRed3()">9</button>
	<button type="button" onclick="tenRed3()">10</button>
	<span><a id="result3Red">0</a></span> - 
	<span><a id="result3Blue">0</a></span>
	<button type="button" onclick="tenBlue3()">10</button>
	<button type="button" onclick="nineBlue3()">9</button>
	<button type="button" onclick="eightBlue3()">8</button>
</div>



<h3>Total:</h3>
<span id="resultRed">0</span> - 
<span id="resultBlue">0</span>
<footer>
</footer>



<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
3
Rodrigo Liva 22 जून 2018, 02:43

1 उत्तर

जब मैंने इसे समाप्त किया तो पोस्ट ने पहले ही उत्तर स्वीकार कर लिया है और 4 अपवोट प्राप्त कर चुके हैं। मैं इसे वैसे भी पोस्ट करने जा रहा हूं, सिर्फ रेफरी के लिए।

NodeList.prototype.map=Array.prototype.map;

const sum=()=>{
	resultRed.innerText=document.querySelectorAll(".resultRed").map(x=>x.innerText).reduce((a,b)=>Number(a)+Number(b));
	resultBlue.innerText=document.querySelectorAll(".resultBlue").map(x=>x.innerText).reduce((a,b)=>Number(a)+Number(b));
}

for(const cn of document.querySelectorAll("body>div").map(x=>x.className)){
	const parent=document.getElementsByClassName(cn)[0];
	parent.querySelectorAll("button").forEach((v,i)=>{
		if(i<=2) v.onclick=()=>{
			parent.querySelector(".resultRed").innerText=v.innerText;
			sum();
		}
		else v.onclick=()=>{
			parent.querySelector(".resultBlue").innerText=v.innerText;
			sum();
		}
	});
}
<!-- Round 1 -->
<div class="roundOne">
	<button type="button">8</button>
	<button type="button">9</button>
	<button type="button">10</button>
	<spam><a class="resultRed">0</a></spam> - 
	<spam><a class="resultBlue">0</a></spam>
	<button type="button">10</button>
	<button type="button">9</button>
	<button type="button">8</button>
</div>
<!-- Round 2 -->
<div class="roundTwo">
	<button type="button">8</button>
	<button type="button">9</button>
	<button type="button">10</button>
	<spam><a class="resultRed">0</a></spam> - 
	<spam><a class="resultBlue">0</a></spam>
	<button type="button">10</button>
	<button type="button">9</button>
	<button type="button">8</button>
</div>
<!-- Round 3 -->
<div class="roundThree">
	<button type="button">8</button>
	<button type="button">9</button>
	<button type="button">10</button>
	<spam><a class="resultRed">0</a></spam> - 
	<spam><a class="resultBlue">0</a></spam>
	<button type="button">10</button>
	<button type="button">9</button>
	<button type="button">8</button>
</div>



<h3>Total:</h3>
<spam id="resultRed">0</spam> - 
<spam id="resultBlue">0</spam>
<footer>
</footer>
1
Chase 22 जून 2018, 03:52