So far i only managed to add a placeholder from websource but attemps to upload have resulted into crashes, tried to create objecturl, but that redirects me to an error internal server
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="cars">
<h2>Cars</h2>
<ul id="car-list">
</ul>
</section>
<section id="add-car">
<h2>Add a New Car</h2>
<form method="post" id="car-form">
<label for="make-input">Type</label>
<input type="text" id="make-input" required>
<label for="model-input">Model</label>
<input type="text" id="model-input" required>
<label for="price-input">Price</label>
<input type="number" id="price-input" required>
<label for="image-input">Image</label>
<input type="file" id="image-input" accept="image/*" required>
<button id="addCarButton" >Add Car</button>
</form>
</section>
<script src="./script.js"></script>
</body>
</html>
Javascript
var modelInput = document.getElementById('model-input');
var priceInput = document.getElementById('price-input');
var imageInput = document.getElementById('image-input');
var addTaskButton = document.getElementById('addCarButton');
var incompleteTasks = document.getElementById('car-list');
var addTask = function () {
var name = nameInput.value;
var model = modelInput.value;
var price = priceInput.value;
var image = imageInput.value;
//image.createObjectUrl
var li = document.createElement('li');
li.innerHTML =
//"<img>" + image + "</img>" +
"<img src="https://placehold.it/350x350" width="400px" height="150px">" +
// "<img>" + image + "</img>" +
"<span>" + name + "</span>" +
"<span>" + model + "</span>" +
"<p>" + 'engine version and colors' + "</p>" +
"<span>" + '$'+price + "</span>" +
"<button class='remove'>Buy</button>";
li.classList.add('listingstyle');
incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;
I tried some codes from youtube that worked fine when on index.html was only and input:file tag, but when i adapted the code to the code below its either giving errors breaking the whole form function or getting me redirected to internal server error
New contributor
The last Jedi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.