单击输入框时，需要显示我的段落。 我的p数组如何不循环遍历我的段落变量？

Question

I am trying to loop through my p array to find each paragraph variable so that I can change the opacity of my HTML.

var p1 = document.querySelector(".p1");
var p2 = document.querySelector(".p2");
var p3 = document.querySelector(".p3");

var p = [1,2,3];
function visible() {
    for (var i = 0; i < p.length; i++) {
        p[i].style.opacity = 1;
    }

 }

The result I am looking for is when I click an input text box I want my paragraph to show. The visible function is an html onclick function.

Answer 1

I think you mean

var p = [p1,p2,p3];

not

var p = [1,2,3];

edited

You can add a parameter inside your html.

<input type="number" onclick="displayParagraph('.p1')">
<input type="number" onclick="displayParagraph('.p2')">
<input type="number" onclick="displayParagraph('.p3')">

function displayParagraph(paragraphClass){
var p = document.querySelector(paragraphClass);
p.style.opacity = 1;
}

Answer 2

 let p1 = document.getElementsByClassName("p1"); let p2 = document.getElementsByClassName("p2"); let p3 = document.getElementsByClassName("p3"); let pArray = []; pArray.push(p1,p2,p3); setTimeout(()=>{ pArray.map((x)=>{ x[0].style.opacity =1 }) },0); 

Now we have to use the setTimeout function, because the p1 and p2 and p3 are Still unknown to the DOM in your javascript file. if you will use JQuery for instance and put your code in the $( document ).ready() {} function it will be known.