I'm basing this off of a project that I had last semester at school. It did essentially what I want it to but it did it for an array. For what I'm doing right now, I just want one image- not an array so that I can get rid of those for loops and such.
<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
myImages = new Array();
var myFiles = document.getElementById("files");
for (var i=0; i < myFiles.files.length; i++)
{
myImages[i] = myFiles.files[i].name;
}
var theImages = document.getElementById("images");
theImages.innerHTML = ""; // Clearout the image area.
for (var i=0; i < myFiles.files.length; i++)
{
"<img id='pic" + i + i + ";'" + " src='" + myImages[i] +
"'" + " width = '400' " + " /> ";
}
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files[]" accept="image/*" onchange="loadImage();" multiple />
</div>
<div id="images" style="position:relative; ">
Images will go here...
</div>
</body>
</html>
This is where I'm at so far:
<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
var myFiles = document.getElementById("files");
document.getElementById("images").innerHTML = "<img src='" + myFiles.files.src +"'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>
So far- when I click the button, I can browse for my file but all I get in the browser is a broken image icon.
<html>
<head>
<script>
function loadImage()
{
var myFiles = document.getElementById("files");
document.getElementById("images").innerHTML = "<img src='" + myFiles.files[0].name +"'>";
}
</script>
</head>
<body>
<div>
<input id="files" type="file" name="files" accept="image/*" onchange="loadImage();">
</div>
<div id="images">
Images will go here...
</div>
</body>
</html>
I'm answering my own question because it was only answered with comments and I couldn't select them as answers. Thanks to Raptus and Gio for helping me get there.
Related
I have been working on a homework tracker. I am currently able to add and delete homework items which are inputted by the user. However, there is a problem where if you delete an item by clicking the delete button, you can click anywhere on any other homework item and it will delete it even though you did not press the delete button.
Here is my code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>
</head>
<body>
<h1>Homework Tracker</h1>
<br>
<div class="AddNewSub">
<i class="material-icons" style="font-size:30px; vertical-align: middle;">receipt</i>
<textarea id="addhw" placeholder="Input Homework"></textarea>
<button type="button" id="addbutton" onclick="add()"> Add </button>
</div>
<br>
<div id="MainContents">
</div>
<script>
var close = document.getElementsByClassName("close");
document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon'));
function add() {
var contents = document.getElementById('addhw').value;
contents = contents.replace(/\r?\n/g, '<br />');
var newline = document.createElement('div');
newline.setAttribute("class", "close");
newline.setAttribute("id", "UserConDiv")
newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw()'>Delete</button>" + "<br>";
document.getElementById("MainContents").appendChild(newline);
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function deletehw() {
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
this.parentNode.removeChild(this);
localStorage.removeItem('UserInputCon');
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
}
}
</script>
</body>
</html>
You have to change your delete function. At the moment you are iteration over the "close" items, but close is not the button but the whole homework entry, so on click on any of this, you will delete them.
Try this code:
But i would suggest you to use event binding and not directly print onclick in the element. Also you should use a template for your homework entry
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta charset="utf-8">
<title>Homework</title>
</head>
<body>
<h1>Homework Tracker</h1>
<br>
<div class="AddNewSub">
<i class="material-icons" style="font-size:30px; vertical-align: middle;">receipt</i>
<textarea id="addhw" placeholder="Input Homework"></textarea>
<button type="button" id="addbutton" onclick="add()"> Add </button>
</div>
<br>
<div id="MainContents">
</div>
<script>
var close = document.getElementsByClassName("close");
document.getElementById("MainContents").innerHTML = JSON.parse(localStorage.getItem('UserInputCon'));
function add() {
var contents = document.getElementById('addhw').value;
contents = contents.replace(/\r?\n/g, '<br />');
var newline = document.createElement('div');
newline.setAttribute("class", "close");
newline.setAttribute("id", "UserConDiv")
newline.innerHTML = "<div id='contentdiv'>" + contents + "</div>" + " " + "<button type='button' id='delbutton' onclick='deletehw(this)'>Delete</button>" + "<br>";
document.getElementById("MainContents").appendChild(newline);
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
function deletehw(element) {
let container = element.parentElement;
container.parentNode.removeChild(container);
localStorage.removeItem('UserInputCon');
localStorage.setItem('UserInputCon', JSON.stringify(document.getElementById("MainContents").innerHTML));
}
</script>
</body>
</html>
I've tried to apply similar code to an existing Stackoverflow topic which applies the following code: http://jsfiddle.net/zsNF5/4/
The problem is: I get the message Uncaught ReferenceError: ic1 is not defined when I click my button.
function ImageCollection(images) {
this.images = images;
this.i = 0;
this.no = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
this.yes = function(imgId) {
var img = document.getElementById(imgId);
this.i++;
if (this.i == images.length)
this.i = 0;
img.src = images[this.i];
}
}
var ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);
The variable ic1 is defined in the code, that's why I'm confused.
This is my html:
<!DOCTYPE html>
<html>
<head>
<title>Face or no face</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="javascript.js"></script>
</head>
<body>
<div class="title">
<h1 >IS THIS A FACE?</h1>
</div>
<img class="photo" src="images/test.jpg">
<div class="container">
<form method="post" action="store.php">
<input type='button' class="button1" value='NO' onclick='ic1.no("container")' />
<input type='button' class="button2" value='YES' onclick='ic1.yes("container")' />
</form>
</div>
</body>
</html>
I hope I'm clear as my JS skills are obviously very limited. Thanks!
You're using var keyword to define ic1. This limits it to the closest scope which might not be window. To define it as a global do
window.ic1 = new ImageCollection(
['images/test.jpg', 'images/no1.jpg', 'images/no2.jpg']
);
Where is your <img id='container' like in your example in the link?
This is the html code from the working example-
<img id='container' src="data:image/jpeg;base64,/bla bla bla base 64" >
<input type='button' value='next' onclick='ic1.next("container")' />
<input type='button' value='prev' onclick='ic1.prev("container")' />
And this is your code with class and not id
<div class="container">
And in your function you are looking for var img = document.getElementById(imgId);
So try to replace class with id like <div id="container">
When I clicked print button, the print preview was failed only Google chrome. Other browsers are working fine. I couldn't find out this problem. Why print preview is failed?
<!doctype HTML>
<html>
<head>
<script type="text/javascript" src="/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function PrintImage() {
var x = window.open('','_blank','location=0');
x.document.body.style.margin = '0';
x.document.body.innerHTML = '';
x.document.write("<!DOCTYPE html>");
x.document.write("<html style='margin:0px;'><head></head><body onload='printpage()' style='margin:0px;'>");
x.document.write("<img src='http://10.78.129.248:8080" + $('#imgFront').attr('src') + "' style='margin:0px;border:0px;display:block;height:100%;width:100%;" /* + $('#imgFront').css('height') + "; width:" + $('#imgFront').css('width') + */ + "'/>");
x.document.write("</body></html>");
x.document.close();
x.focus();
x.print();
x.close();
}
</script>
</head>
<body>
<img id="imgFront" src="/badgeimagehandler.jpg" align="middle" border="0" style="width: 80mm; height: 50mm" />
<form>
<input type="submit" name="btnPrint" value="Print" onclick="javascript:PrintImage();" language="javascript" id="btnPrint" /> <!-- -->
</form>
</input>
</body>
</html>
I am new to javacript. I used an API for implementing custom search feature. But in my search page results show only after I enter the first search key. If I enter another search key, the results for the second key don't show up until I refresh the page.
How can I get the results to auto-update when entering more characters into the search box?
HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jsonData.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function display() {
document.location = "contentpage.html";
}
$(document).ready(function () {
$("#submit").click(searchAPI);
});
</script>
</head>
<body>
<input type="text" id="search1" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" >
<p id="desc"> </p>
<p></p>
</div>
</body>
</html>
My JS Code:
function searchAPI(){
var key= $("#search1").val();
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=' + key + ' &format=json&pretty=1&callback=?', function(data) {
var htmlContent = '<ul>';
for (var i = 0; i < data.RelatedTopics.length; i++) {
var desc = data.RelatedTopics[i].Text;
var url = data.RelatedTopics[i].Icon.URL;
var link = data.RelatedTopics[i].FirstURL;
document.getElementById('link').href = link;
var y = document.getElementById("link");
y.innerHTML = link;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:block'/> " +
"<p id='desc'>" + desc + "</p>" + "<a target='_blank' id='link' href=" + link + " >go to website</a></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
Can anyone help me to solve this issue...Thanks in advance.
I have here a working code that lets the user input something and it displays the output right away, but I want to create a function triggered by a button that would clear the output area itself. Is this possible with my code?
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>
</html>
Try this,
Javascript:
function Clean(){
document.getElementById('display').innerHTML='';
}
HTML:
<input type="button" value="Clean" onClick="Clean()"/>
Do this:
Notes:
-I have closed the P element.
-A new button was added "Clean" and you can use JQuery as it is shown below to clean the output (remember to have JQuery referenced in your page).
<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input" />
<input type="button" value="GO" onClick="press(input.value)"/>
<input type="button" value="Clean" onClick="$('#display').html('');"/>
<p id = "display"></p>
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>