初学者/我尝试使用 Onclick 取消隐藏元素，但它不起作用

Question

I want to make a page to upload the avatar. By default, I use the vector to show where the image will appear and then provide a button to upload the URL to change the avatar. That's all it is. But the script still doesn't work. Pleased to hear your feedback on how to fix it. Bless

<img id="put_image_here_bitch" src="https://cdn0.iconfinder.com/data/icons/finance-vol-2-4/48/77-512.png" alt="" width="100px" height="100px">
<div class="block" > The person who uploads this is cool
</div>

<button onclick="hideElement()">Click to upload photo by URL</button>

<div>
    <input id="input" autofocus class='hidden_element' style="display: none;" type="text" id="input">
</div>
<div>
    <button class='hidden_element' style="display: none;" onclick="uploadImage()">UPLOAD</button>

    
</div>

This is my script

 function hideElement(){
    var hide = document.getElementsByClassName('hidden_element');
    if (hide.style.display === "none") {
    hide.style.display = "block";
    } else {
    hide.style.display = "none";
    }
}

var uploadImage = function(){
    image = document.getElementById('input').value;
    showImage = document.getElementById('put_image_here_bitch').setAttribute('src', image);

    
};

Answer 1

As stated in the comments, .getElementsByClassName() returns a collection of elements, not a single element and your code attempts to call the style property of the collection, which doesn't exist.

Instead, you need to loop through the collection and operate on the elements within the collection individually, but don't use .getElementsByClassName() and instead use .querySelectorAll() .

 var hidden = document.querySelectorAll('.hidden_element'); function hideElement(){ // Loop over the colleciton elements hidden.forEach(function(element){ if (element.style.display === "none") { element.style.display = "block"; } else { element.style.display = "none"; } }); } var uploadImage = function(){ image = document.getElementById('input').value; showImage = document.getElementById('put_image_here_bitch').setAttribute('src', image); };

 <img id="put_image_here_bitch" src="https://cdn0.iconfinder.com/data/icons/finance-vol-2-4/48/77-512.png" alt="" width="100px" height="100px"> <div class="block" > The person who uploads this is cool </div> <button onclick="hideElement()">Click to upload photo by URL</button> <div> <input id="input" autofocus class='hidden_element' style="display: none;" type="text" id="input"> </div> <div> <button class='hidden_element' style="display: none;" onclick="uploadImage()">UPLOAD</button> </div>

But, beyond that, you should also avoid using inline styles as they are the most specific way of setting a style and therefore the hardest to override. They also often require duplicated code to be written. Instead, use CSS classes as shown below:

 // Get references to the DOM elements that you'll need to work with const btnUpload = document.querySelector("button"); // find the first button const hidden = document.querySelectorAll(".hidden"); const upload = document.querySelector(".upload"); // Do your event binding in JavaScript, not in HTML btnUpload.addEventListener("click", hideElement); upload.addEventListener("click", uploadImage); function hideElement(){ // Loop over the collection of hidden elements hidden.forEach(function(item){ // See how much more simple it is to work with classes? item.classList.toggle("hidden"); }); } function uploadImage(){ showImage = document.getElementById('put_image_here_bitch').setAttribute('src', input.value); };

 .hidden { display:none; }

 <img id="put_image_here_bitch" src="https://cdn0.iconfinder.com/data/icons/finance-vol-2-4/48/77-512.png" alt="" width="100px" height="100px"> <div class="block" > The person who uploads this is cool </div> <button>Click to upload photo by URL</button> <div> <input id="input" autofocus class='hidden' type="text" id="input"> </div> <div> <button class='hidden upload'>UPLOAD</button> </div>

Answer 2

simple.. getElementsByClassName() returns an HTMLCollection with all DOM elements containing that class. An HTMLCollection is like an array ( but not really ) containing element references.

thus you need to define which entry in the array you want to handle ( even if there's only one )

your code should work by simply adding [0] to your DOM read ( the '0' means the first element in the collection )

ex:

var hide = document.getElementsByClassName('hidden_element')[0];