I have a simple form where you can upload html files. I have 3 files:
Main HTML file - which contains my form and JavaScript function.
Secondary HTML file - this is used to upload to the form.
CSS file - this is for the secondary HTML file.
I want to override the CSS value of the uploaded html file using this function in my main HTML file:
<!DOCTYPE html>
<html>
<head>>
<meta charset="UTF-8">
<title>Changing the style of another HTML File</title>
<script type="text/javascript">
function updateSize() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
function extract() {
var el = document.getElementById("test");
el.style.background = 'green';
el.style.color = 'red';
}
</script>
<body onload="updateSize();">
<form>
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="button" value="Submit" onclick="extract()"></p>
</form>
</body>
</html>
The Secondary HTML file has the following code (This will be submitted to the form):
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="test">This is a div</div>
</body>
</html>
This is my CSS file for my Secondary HTML file:
#test {
background-color: red;
color: yellow;
};
However, it doesn't work. Where I'm I going wrong?
You are using input type="submit", which do page reload. So when background change to green and it reload so it is not showing your style changes. So remove type ="submit". use input type="button.and then onclick function in button. You ca use this code:-
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="test">This is a div</div>
<form >
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="button" value="Submit" onclick="extract()"></p>
</form>
<script type="text/javascript">
function extract() {
var el = document.getElementById("test");
el.style.background = 'green';
el.style.color = 'red';
}
</script>
</body>
</html>
When a form is submitted the page reloads, so...
Form is submitted,
CSS changed,
Page reloaded,
CSS is at it's default
Try using AJAX
Related
I follow Javascript - How to extract filename from a file input control and I have few problems with getting file name from input/upload file. I use this code to get file name from input file
var fileInput = document.getElementById('upload_file').files[0].name;
But when I change with another file, I still get my old file name and I need to refresh my browser to get latest file name. How to fix something like this?
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
//var filename = fileInput.files[0].name;
console.log(fileInput);
document.getElementById('nama_file').innerText = fileInput;
</script>
</body>
</html>
You need an event:
var filename = document.getElementById('filename');
document.getElementById('upload_file').addEventListener('change', function(e) {
filename.innerText = e.target.files[0].name;
});
<input type="file" id="upload_file">
<br>
<h1 id="filename"></h1>
You can add a event on every load and change the inner text of 'name_file' accordingly.
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<input type="file" id="upload_file">
<br>
<h1 id="nama_file"></h1>
<script>
var fileInput = document.getElementById('upload_file').files[0].name;
fileInput.addEventListener('change', () => {
document.getElementById('nama_file').innerText = fileInput;
});
console.log(fileInput);
</script>
</body>
</html>
I am newbie to javascript ,Help me to display image and description in list view on html page get from the json object ..
Here i am parsed a json object and retrieved image URL and image description. Now I have to display the Image and Description in listview on html page. But I am Not getting How..Plese help me to solve this..
Here is My HTML Page:
<!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>
$(document).ready(function(){
$("#submit").click(searchAPI);
})
</script>
</head>
<body>
<input type="text" id="search1" value="search here" >
<button id="submit" >submit</button>
<div id="div1">
<img id="img" src="http://hdcomputerwallpaper.com/wp-content/uploads/2013/12/Puppy- images.jpg" style="width:200px;height:200px;">
<p id="p2"> </p>
</div>
</div>
</body>
</html>
My js file is:
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
}
});
}
Please help me How to display this Image and Description in list view like this
I think this works for you.
modify js like :
function searchAPI(){
var searchText= $("#search1").val();
alert(searchText);
var htmlContent="<ul>";
$.getJSON('http://api.duckduckgo.com/?q=ashok&format=json&pretty=1&callback=?',function(data){
for (var i = 0; i < data.RelatedTopics.length;i++) {
var desc= data.RelatedTopics[i].Text;
var url= data.RelatedTopics[i].Icon.URL;
htmlContent += "<li><img src='" + url + "' style='width:100px;height:100px;display:inline-block'/> <p style='display:inline-block'>"+desc+"</p></li>";
}
htmlContent += "</ul>";
$('#div1').html(htmlContent);
});
}
I'm doing a schoolproject, trying to do an list of things you need to buy.
The problem is, i can't write more than one time and add to the list, and i can't figure out why.
(It's nowhere near done.) (i have to diffrent javascript files)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="pluss.png" alt="Submit"/>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</body>
</html>
function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;
cool.appendChild(vara);
}
var button = document.getElementById("knapp");
button.onclick = function() {
var skriva = document.getElementById("skriva")
var namnVara = skriva.value;
if(!namnVara|| namnVara =="" || namnVara == " " ){
return false;
}
laggtill(document.getElementById("listaavvara"), namnVara);
};
javascrpit 2:
function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";
if(skrivrutan.style.height == maxH){
skrivrutan.style.height = "0px";
} else {
skrivrutan.style.height = maxH;
}
}
HOPEFULLY YOU KNOW WHAT I MEAN! (my pictures are not here)
Because
var button = document.getElementById("knapp");
button.onclick = function() { ... }
overrides the inline event handler. You need to attach events with addEventListener
button.addEventListener("click", function(){...}, false);
Your example works for me on fiddle: http://jsfiddle.net/7zjb86ab/
So this looks like there is something wrong with your imported scripts
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
Are those the two files with your javascript snippets inside?
You could also try to replace
var button = document.getElementById("knapp");
button.onclick = function() {
with
function addItem() {
and then add the function as onclick attribute like you do with the klickaKnapp function
<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />
ive a form with a image , button and textbox. ive to resize the images height and width to what ever is entered in the textbox, when the button is clicked. My image just disappears when the button is clicked.
heres my code
<!DOCTYPE HTML>
<html>
<head>
<title>Resize Image</title>
</head>
<body>
<script>
function resizeimage()
{
var theImg = document.getElementById('image');
theImg.height = size;
theImg.width = size;
}
var size=parseInt(document.getElementById('txtbox'));
</script>
<form name ="ResizeImage">
<img src = "cookie.jpg" id="image">
</br>
<input type=button value="Resize" onclick="resizeimage()">
</br>
<input type=text id="txtbox"
</form>
</body>
</html>
Apart from the HTML problems (please run it through the validator), the main problem is that the part of code that reads the size of the image is outside of the function. On page load, this is what happens.
The function resizeimage() is defined
The var size is set to whatever is in the input at that point
The contents of the page are loaded.
At 2. the input doesn't even exist yet because 3. isn't done yet, so var size is set to undefined. It never changes after that, because the function resizeimage() does not try to read the size of the image again.
Also, document.getElementById returns an element. You will have to read what the user put into it by using it's .value property
Try this:
function resizeimage()
{
var size=parseInt(document.getElementById('txtbox').value);
var theImg = document.getElementById('image');
theImg.height = size;
theImg.width = size;
}
Working example: http://jsfiddle.net/KZH5p/
I would cache the ids first:
var input = document.getElementById('txtbox');
var theImg = document.getElementById('image');
function resizeimage() {
var size = input.value;
theImg.height = size;
theImg.width = size;
}
function changeDogsSize() {
var dogSize = parseInt((id_input).value);
id_dog.width = dogSize;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container bg-light mt-3"></div>
<!--changing dogs image-->
<div class="container">
<img id="id_dog" src="https://i.pinimg.com/originals/e4/9d/75/e49d755afcd02cdbf39d374b42a10ecd.jpg" alt="dog">
<input id="id_input" type="text" class="form-control mt-4" id="exampleInputAmount" placeholder="enter img width">
<button id="id_changeBtn" onclick="changeDogsSize()" type="button" class="btn btn-secondary btn-lg mt-3 text-dark">Change</button>
</div>
</body>
</html>
It always seems to be a problem and I fail to see why, I'm trying to change element p text by using his ID, element p id="para1" is inside PostEditor.html:
The elementID I want to change is para1 in the following html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
The following function is issued by a click on a link inside index.html and displaying the page you are seeing above and is then supposed to change its content:
From index.html I issue the function from link:
<a onclick="postEditing()"> Edit</a>
This line issue the following function:
function postEditing()
{
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.document.getElementById("para1").innerHTML = "11111111111";
result.document.getElementById("para1").innerText = "11111111111";
result.document.getElementById("para1").value = "11111111111";
}
As you can see I tried three methods. I'd never understand what is the difference between them, but I tried all three and none worked!
It's because you're searching the document of the window which shows the index.html, not the document of the newly opened window. try following:
...
var editorWindow = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
editorWindow.document.getElementById("para1").innerHTML = "11111111111";
...
EDIT:
NOW i see the problem: in the function you're trying to access a property of the parameter element, but you don't pass a value for it. So this will end in an error because the accessed object is undefinded!
So you have three options to get it working:
test the parameter (always a good idea): var ID = null; if(element) ID = element.id;
pass a value: <a onclick="postEditing(this)"> Edit</a>
remove the line var ID = element.id;
SOLUTION: (TESTED)
I could not really say why, but the index.html found the para1 and can successfully set the new text. But somehow the new window will reinitialize the old value again.
So you have to do the changing in an handler you run at onLoad:
index.html:
<html>
<head>
<script>
function postEditing() {
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.onload = function() {
result.document.getElementById("para1").innerHTML = "11111111111";
}
}
</script>
</head>
<body>
<a onclick="postEditing()"> Edit</a>
</body>
</html>
PostEditor.html:
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link href="styles/editor.css" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/mainScript.js"> </script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="submit" onclick="urlLoader('caller','posthandler.php')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>
I'm fairly sure you will need to query the return result of calling window.open like this:
function postEditing(element)
{
var ID = element.id;
var result = window.open('PostEditor.html', 'newwindow', 'width=350,' + 'height=350');
result.getElementById("para1").innerHTML = "11111111111";
result.getElementById("para1").innerText = "11111111111";
result.getElementById("para1").value = "11111111111";
}
[Untested though]
Your button type is submit, which is posting the form. The object is changing in the DOM, only after the script runs, the DOM is reloaded back to it's original state. Try changing your button type to "button", and you should see the P element change appropriately.
Edit: Here's the HTML I used to determine the above. Keeping the button as "submit" caused me to see the text change and then swap back. The HTML below should keep the text in place. HTH!
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<script>
function postEditing(element)
{
document.getElementById('para1').innerHTML = "asdafs";
}
</script>
</head>
<body>
<!-- Input fields -->
<div class="center">
<form id=caller method="post">
<p id="para1" class="text"><Strong>Post your message</Strong></p>
<textarea id="textEditor" rows="16" cols="34" name="content"></textarea>
<input type="button" onclick="postEditing('caller')" value="Post">
</form>
</div>
<!-- end Input fields -->
</body>
</html>