如何使用一个JS函数在不同的段落上显示不同的输出？ HTML / JS [英] How can I have different outputs displayed on different paragraphs using one JS function? Html/JS

问题描述

所以我要做的是，当点击向上箭头时，我有一个箭头（向上和向下），有一个变量可以计算我们点击的次数，结果显示在一个段落中

 <   p     id   =  count >  0 <   / p  >  

但是，每当我尝试添加另一个时，请说div使用相同的向上和向下箭头（相同的类）和同一段ID count 当我点击新div上的向上箭头时，结果会在我的第一段输出。



我尝试了什么：

  var  counter =  0 ; 
  function  mycount（）{
 
 
  document  .getElementById（  count）。innerHTML = ++ counter; 
} 
 
  function  myminus（）{
  document  .getElementById（  count）。innerHTML = --counter; 
  if （counter< 0）{
 counter =  0  
  document  .getElementById（  count） .innerHTML =  0 ; 
} 
 
} 

我有一个带的向上箭头onclick =mycount（）和向下箭头带 onclick =myminus（）我知道我的问题是 getElementById（count）我希望能够添加带有新段落的向上和向下箭头，并将输出放在新段落上。如果我复制并粘贴我的javascript代码并更改 getElementById（putIDhere）

解决方案

如果你有两个id为count的div，你怎么期望document.getElementById（count）知道你想要得到哪个div？ ID必须在页面上唯一。如果您需要多个箭头实例，那么每个箭头都需要一个唯一的ID。最简单的方法可能是在id中添加一个数字，这样第一个div就是count0，然后是count1等。每次你添加一个新的实例都会增加数字。



接下来你需要改变js来接受这个数字

 function myminus（id）{
 document。 getElementById（count+ id）.innerHTML = --counter; 
 if（counter< 0）{
 counter = 0 
 document.getElementById（count+ id）.innerHTML = 0; 
} 
 
} 

任何调用myminus的代码都需要知道自己的id才能通过进入功能。

So what I'm trying to do is that I have an arrow (up and down) when the arrow up is clicked, there is variable that counts how many times we clicked and the result is seen in a paragraph

<p id="count">0</p>

However, everytime I try to add another let's say div with the same up and down arrow (same class) and same paragraph id count when I click the up arrow on the new div, the result is outputted on my very first paragraph.

What I have tried:

var counter=0;
function mycount() {


document.getElementById("count").innerHTML = ++counter;
}

function myminus(){
      document.getElementById("count").innerHTML = --counter;
	  if(counter<0){
	  counter=0
	  document.getElementById("count").innerHTML = 0;
    }

}

I have an up arrow with an onclick="mycount()" and down arrow with an onclick="myminus()" I know my problem which is the getElementById("count") I want to be able to add an up and down arrow with a new paragraph and having the output be on the new paragraph. It doesn't really seem efficient if I copy and paste my javascript code and changing the getElementById("putIDhere")

解决方案

If you have two divs both with the id of "count" then how do you expect document.getElementById("count") to know which div you want to get? ids have to unique on a page. If you need multiple instances of your arrows then you'll need a unique id for each. The simplest way is probably to add a number to the id so the first div will be "count0", then "count1" etc. Every time you add a new instance increment the number.

Next you need to change the js to accept this number

function myminus(id){
      document.getElementById("count" + id).innerHTML = --counter;
	  if(counter<0){
	  counter=0
	  document.getElementById("count" + id).innerHTML = 0;
    }

}

Any code that calls myminus needs to know its own id to pass into the function.

这篇关于如何使用一个JS函数在不同的段落上显示不同的输出？ HTML / JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！