英文:
loading an image to The DOM and then append it to a div element, I get an error Uncaught TypeError: imagecontainer.appendchild is not a function
问题
我有一个简单的HTML文档，如下所示，我想要将图像作为输入并显示在具有类名**imagecontainer**的类div中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<label for="profile">请插入您的图像</label>
<input type="file" name="profile" id="profile">
</div>
<div>
<button>提交</button>
</div>
<div class="imagecontainer">
</div>
</body>
</html>
我正在使用的JavaScript文件如下所示：
const button = document.querySelector('button');
button.addEventListener('click', () => {
const imagecontainer = document.querySelector('.imagecontainer');
const fileInput = document.querySelector("input[type=file]");
const image = document.createElement('img');
var fReader = new FileReader();
fReader.readAsDataURL(fileInput.files[0]);
fReader.onloadend = function (event) {
image.src = event.target.result;
image.classList.add('profile-image');
}
imagecontainer.appendChild(image);
console.log(imagecontainer);
});
<details>
<summary>英文:</summary>
I have a simple html document, as seen below that I want to take an image as input and display it back the class div with the classname **imagecontainer**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<label for="profile">Please insert your image</label>
<input type="file" name="profile" id="profile">
</div>
<div>
<button>Submit</button>
</div>
<div class="imagecontainer">
</div>
</body>
</html>
The javascript file that I am using can be seen below
const button = document.querySelector('button')
button.addEventListener('click',()=>{
const imagecontainer = document.getElementsByClassName('imagecontainer')
const cardImageInput = document.getElementById('profile')
const myImage = cardImageInput.value
cardImageInput.value = ''
const image = document.createElement('img')
image.src = myImage
image.classList.add('profile-image')
imagecontainer.appendchild(image)
console.log(imagecontainer)
})
The code seems simple enough but I cant figure out the problem, everytime it runs I see this error message on the web console ```Uncaught TypeError: imagecontainer.appendchild is not a function
at HTMLButtonElement.<anonymous>```
*********************************************************************
*********************************************************************
*********************************************************************
*********************************************************************
*********************************************************************
*********************************************************************
solved the problem by changing `getElementByClassName` and instead used `querySelector` ...However after running the program I got an error **c:\fakepath\FdkmPsOWQAINAt8.png:1 GET c:\fakepath\FdkmPsOWQAINAt8.png net::ERR_UNKNOWN_URL_SCHEME** I was told this was a security implementation of the browser.
The work around I have found for this is by using the **FileReader**
editing my javascript here is the code that worked for me
const button = document.querySelector('button');
const fileInput = document.querySelector("input[type=file]");
button.addEventListener('click',()=>{
const imagecontainer = document.querySelector('.imagecontainer');
const image = document.createElement('img');
var fReader = new FileReader();
fReader.readAsDataURL(fileInput.files[0]);
fReader.onloadend = function(event){
image.src = event.target.result;
image.classList.add('profile-image');
}
imagecontainer.appendChild(image);
console.log(imagecontainer);
});
</details>
# 答案1
**得分**: 1
在你的代码中有两个问题：
1. 正确的方法名是 `appendChild`，而不是 `appendchild`。由于 JavaScript 区分大小写，正确的代码应该是 `imagecontainer.appendChild(image)`。
2. `document.getElementsByClassName` 返回一个元素集合。在你可以在它上面使用 `appendChild` 方法之前，你需要访问集合中的特定元素。你可以使用 [`document.querySelector()`][1] 来代替，它会选择第一个匹配的元素。
**代码示例：**
```html
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const button = document.querySelector('button');
button.addEventListener('click', () => {
const imagecontainer = document.querySelector('.imagecontainer');
const cardImageInput = document.getElementById('profile');
const myImage = cardImageInput.value;
cardImageInput.value = '';
const image = document.createElement('img');
image.src = myImage;
image.classList.add('profile-image');
imagecontainer.appendChild(image);
console.log(imagecontainer);
});
<!-- language: lang-html -->
<div>
<label for="profile">请插入您的图片</label>
<input type="file" name="profile" id="profile">
</div>
<div>
<button>提交</button>
</div>
<div class="imagecontainer">
</div>
<!-- end snippet -->
英文:
Two issues in your code:
-
The correct method name is
appendChild, notappendchild. As JavaScript is case-sensitive, the correct code should beimagecontainer.appendChild(image). -
document.getElementsByClassNamereturns a collection of elements. You need to access the specific element from the collection before you can use theappendChildmethod on it. You can usedocument.querySelector()instead, which selects the first matching element.
Code Example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const button = document.querySelector('button');
button.addEventListener('click',()=>{
const imagecontainer = document.querySelector('.imagecontainer');
const cardImageInput = document.getElementById('profile');
const myImage = cardImageInput.value;
cardImageInput.value = '';
const image = document.createElement('img');
image.src = myImage;
image.classList.add('profile-image');
imagecontainer.appendChild(image);
console.log(imagecontainer);
});
<!-- language: lang-html -->
<div>
<label for="profile">Please insert your image</label>
<input type="file" name="profile" id="profile">
</div>
<div>
<button>Submit</button>
</div>
<div class="imagecontainer">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论