I need to pull the function out of the following html document, create a separate js document that will contain the function and modify my existing code so that it includes my js file. Then I must create a new function in my html file called "DoTheLink." I will call that function from the function in my js file. "DoTheLink" will be passed the website variable and will set the onclick attribute for the button.
Here is what I have to work with:
<!DOCTYPE html>
<html>
<head>
<title>funky jumper </title>
</head>
<body>
<script>
var surfCaption="You\'ve selected: Bird Rock Surf Cam";
var surfButton="Bird Rock Surf Cam";
var surfWeb="http://www.surfline.com/surf-report/birdrock-7-california_4249";
var grandmaCaption="You\'ve selected: Grandma\'s Weather";
var grandmaButton="Grandma\'s Weather";
var grandmaWeb="http://www.weather.com/weather/today/Bronx+NY+10463:4:US";
var dollCaption="You\'ve selected: Noodle-head sewing";
var dollButton="Noodle-head sewing";
var dollWeb="http://www.noodle-head.com/2010/01/another-round-of-black-apple-dolls.html";
</script>
<div style="text-align: center">
<table align="center">
<td> <img src="http://nees.oregonstate.edu/killer_wave/wave.jpg" alt="Surf" border="3" height="280" width="172" onclick="uno(surfCaption, surfButton, surfWeb);">
</td>
<td> <img src="http://wirednewyork.com/images/city-guide/liberty/liberty.jpg" alt="Grandma's Weather" border="3" height=280 width=200
onclick="uno(grandmaCaption, grandmaButton, grandmaWeb);">
</td>
<td> <img src="http://4.bp.blogspot.com/__A1V8kztPXs/S1XYcpBScbI/AAAAAAAAA00/S_nd0bNtUR8/s640/helpfulhannahpresent3.jpg" alt="Noodle-head" border="3" height=280 width=180
onclick="uno(dollCaption, dollButton, dollWeb);">
</td>
</table>
<p id="captionUnderTable" >Nothing Selected</p>
<br>
<button id="NewButton" >Click on a picture, then click me to go!</button>
</div>
<script>
function uno(Caption, Button, Web)
{
document.getElementById("captionUnderTable").innerHTML=Caption;
document.getElementById("NewButton").innerHTML=Button;
document.getElementById("NewButton").setAttribute('onclick','window.location.href="'+Web+'";')
<!--When the picture is clicked, go get the variable associated with that picture-->
}
</script>
</body>
</html>
If you're trying to put what is between the < script > tags in another file, this link might help: http://www.htmlgoodies.com/beyond/javascript/article.php/3470901/So-You-Want-An-External-JavaScript-Huh.htm
Related
Apparently, I can’t figure out how to bind font awesome element to the cloned form. I tried everything, but the image on the cloned form goes to the original message.
The image preview was already functioning on the cloned form. Afterwards First on html, I added font awesome element with camera icon just above <input type="file". Second on javascript, I added a function to trigger font awesome element, which works on the original message submission. Third, I created iClone() function to find, trigger, and change the data-count number of both font awesome and input file after grabbing font awesome element using jQuery. Fourth, I created var cloneCount = 0; variable initially set to 0 to increment and change the id name of the cloned form. Fifth, I created var bindFileChange = function(cloneCount) { variable to bind font awesome and file input elements to the new form with new form id name.
Next on the reply button $("button").click(function(){, where the actual cloning takes place, first, cloneCount++; increments cloneCount, i.e., id name of the new form. Second, it clones the form and add the new id name to it. Third, it runs the iClone function. Finally, it runs the bindFileChange(cloneCount); function. This is supposed to bind both font awesome and input file to the new form with a new id. But it doesn't work.
Here is the link to the test case, where I tried to add font-awesome to cloned image preview, on JSBin: https://jsbin.com/cepanet/4/edit?js
And, here is the link to the functioning code for cloning image preview without font-awesome on JSBin: https://jsbin.com/xexejur/10/edit?html,js,output
$(document).ready(function() {
// Original message. It is not cloned.
$("#form_clone0").click('submit', function() {
let fileInput = $('input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$(this).siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
// Function to activate font awesome
$("i").click(function() {
$("input[type='file']").trigger('click');
});
});
// Function to find, trigger, and change the data-count number of both font
// awesome and input file after grabbing font awesome element using jQuery.
function iClone() {
$("i").click(function() {
$("input[type='file']").first().attr('data-count', cloneCount).trigger('click');
});
};
// Variables to bind font awesome and file input elements to cloned form.
// Including, variable to increment cloned form counter. Set to zero.
var cloneCount = 0;
var bindFileChange = function(cloneCount) {
let fileInput = $('i, span, input[type="file"][data-count="' + cloneCount + '"]');
fileInput.on('change', function() {
$('i').siblings('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]));
});
};
$("button").click(function() {
// Cloned functions for reply message. Actual cloning takes place
// here.
cloneCount++;
$("#form_clone0").clone().attr('id', 'form_clone' + cloneCount).insertAfter("#form_clone" + (cloneCount - 1));
iClone();
bindFileChange(cloneCount);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="form_clone0">
<form method="post" enctype="multipart/form-data">
<div>
<img class="image_Preview" width="100" height="100" />
<i class="fa fa-camera"></i>
<input type="file" class="fileUpload" data-count="0" style="display: none;">
</div>
<div>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
<button>Reply</button>
</body>
</html>
Use a label and assign it [for] attribute with the value of the input id:
<label for='upload'></label>
<input id='upload' type='file'>
When the label is clicked then the input that it is associated with is as well.
Delegate events on an ancestor tag that existed since the page loaded. Pass a selector that represents all applicable tags that you want to target to the second parameter (it's called Event.data).
$('main').on('click change', '.file, .upload, .reply', function(e) {...
Cloning becomes complicated if the source being cloned has unwanted content. It may be easier just to clone the contents of a <template> or just render a htmlString. The following demo does the latter.
99% of the time it's optimal to place all <script> tags before the </body> end tag (see HTML of Demo).
let count = 0;
$('main').on('click change', '.file, .reply, .upload', function(e) {
if ($(this).is('.reply')) {
++count;
const htmlString = `<form id="box${count}" class="input-group form-row" method="post" enctype="multipart/form-data"><label class="input-group-prepend" for="image${count}" style="display:block;min-height:120px"><figure class="input-group-text" style="min-height:100%"><i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i> <img class="preview" width="100" height="100"> <figcaption> </figcaption></figure></label><input id="image${count}" name='image${count}' class="file" type="file" data-count="${count}" style="display: none"><section class="input-group-append" style="max-height: 120px"><fieldset class="btn-group-vertical" style="min-height: 100%"><button class="upload btn btn-primary btn-sm" type="button" style="min-height: 50%" form="box${count}">Upload</button> <button class="reply btn btn-secondary btn-sm" type="button" style="min-height: 50%">Reply</button></fieldset></section></form>`;
$('main')[0].insertAdjacentHTML('beforeend', htmlString);
} else if ($(this).is('.file')) {
$(this).closest('.input-group').find('.preview').attr('src', window.URL.createObjectURL(this.files[0]));
$(this).closest('.input-group').find('figcaption').text(this.value.split(`\\`).pop());
} else if ($(this).is('.upload')) {
$(this).closest('form').submit();
e.stopPropagation();
} else {
return false;
}
});
$('body').tooltip({
selector: '.tip'
});
i.tip.btn:hover {
color: #fff;
background: #000;
cursor:pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Case</title>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<main class='container'>
<form id='box' class='input-group form-row' method='post' enctype="multipart/form-data">
<label class='input-group-prepend' for='image' style='display:block;min-height:120px'>
<figure class='input-group-text' style='min-height:100%'>
<i class="btn btn-light fa fa-camera tip" title='Select an image or video file'></i>
<img class="preview" width="100" height="100">
<figcaption> </figcaption>
</figure>
</label>
<input id='image' name='image' class="file" type="file" data-count="0" style="display: none;">
<section class=' input-group-append' style='max-height: 120px'>
<fieldset class='btn-group-vertical' style='min-height: 100%'>
<button class='upload btn btn-primary btn-sm' type='button' style='min-height: 50%' form='box'>Upload</button>
<button class='reply btn btn-secondary btn-sm' type='button' style='min-height: 50%'>Reply</button>
</fieldset>
</section>
</form>
</main>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
<!--This is where the jQuery/JavaScript would be placed-->
</script>
</body>
</html>
I've created a simple script that randomly opens sites from a list. I've recently tried to add a feature that enables users to choose the wait (in milliseconds) between the open and close of each page. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Smokescreen</title>
</head>
<body align="center" style="font-family:monospace">
<h2 align="center" style="font-family:monospace">
SmokeScreen
</h2>
<h3 align="center" style="font-family:monospace">
SmokeScreen is a JavaScript program that opens a random site every 3 seconds,
</h3>
<h3 align="center" style="font-family:monospace">
to create a "smokescreen" over your browser history, preventing anyone from [easily] finding your information.
</h3>
<h4 align="center" style="font-family:monospace">To exit, close the original window that has the text "Smokescreen" in the title.</h4>
<p align="center" style="font-family:monospace">
Source Code / Learn More
<br />
<div style="width: 300px; border: 25px solid #800000; margin:0 auto; font-family:monospace;" align="center">
<h4 align="center" style="font-family:monospace">Milliseconds to wait before closing page:</h4>
<h4 id="one" align="center" style="font-family:monospace"></h4>
<button onclick="millisecs = prompt('New time to wait (in milliseconds)?'); if ( isNaN(milliseconds) ) {millisecs = millisecsBackup} else {millisecsBackup = millisecs} document.getElementById('one').innerHTML = millisecs;" style="font-family:monospace" align="center">Set Wait Time</button>
<br />
<br />
</div>
<br />
<div style="margin:0 auto; font-family:monospace" align="center">
<button onclick="getRandom(0, list.length, millisecs);" style="font-family:monospace" align="center">Start!</button>
</div>
</p>
<script src="script.js"></script>
<script>
var millisecs = 3000;
var millisecsBackup = 3000;
document.getElementById("one").innerHTML = millisecs;
</script>
</body>
</html>
For some reason, the text in the h4 with the id of one isn't updating when I type in different numbers. What am I doing incorrectly?
You're checking if (isNaN(milliseconds)) but you called your variable millisecs so it is throwing an error.
If you're using a modern browser, try opening the developer tools (F12 on windows / CMD+OPT+i on mac) and checking the console.
Also please look into moving your inline styles / onclicks to <style> and <script> tags :)
I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.
There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/
You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example
<div id='popup'>
<input id='btnConfirm'/>
</div>
$("#btnConfirm").click(function () {
var frame = $('#[id$=ReportViewer1ParameterArea]'); //get the frame
//s57 is a table element in the viewer
frame.contents().find("#Preview")
.click(
function () {
alert('hover!');
}
);
});
Below is part of the HTML rendered by Telerik Report Viewer
<iframe id="ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea" scrolling="auto" width="100%" height="0px" frameborder="0" align="left" src="/Telerik.ReportViewer.axd?instanceID=0001be3494c046c69b091014203c2914&culture=en-US&uiculture=en-US&optype=Parameters" style="height: 26px;">
<table id="parametersTable" cellspacing="0" cellpadding="0" border="0" style="width:100%;border-collapse:collapse;">
<tr id="parametersRow">
<td valign="middle" align="center" rowspan="2">
<input id="Preview" type="submit" onclick="return ParametersPage.Validate();" value="Preview" name="Preview">
</td>
</tr>
Question :
I need to access the Preview button ID="Preview" in the Report Viewer from a DIV that contains button with ID= btnConfirm on the ASPX page as given above in the JQuery script. The ASPX page contains the Telerik Report Viewer. I put code in the
$("#btnConfirm").click(function () event but that does not work. Can you give me ideas please?
Try using this selector:
var frame = $('[id$="ReportViewer1ParameterArea]"');
Removing the # and adding quotes " around the value.
The below code is what I developed to make my code work:
var reportFrame = document.getElementById('ctl00_ctl00_MainContent_MainContent_ReportViewer1ParametersArea');
var reportDocument = reportFrame.contentWindow.document;
var body = reportDocument.getElementsByTagName("body")[0];
$(body).contents().find("#Preview").click();
I'm trying to get a message to appear when a user clicks the image that's in a the "lifeCalculatorButton" ID, but I can't figure out how to make it work. I know that the html doc is referencing the js doc fine, so that's not the issue. Any ideas?
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<script type="text/javascript" src="apps.js"></script>
<title>my apps</title>
</head>
<body>
<div id="breaks">
<a href="http://info" > <img src="homeicon.png" /> </a>
<br>
<br>
<br>
<br>
<br>
<div id="appTable" style="float: left">
<table border="0" id="appTable">
<tr>
<td>life calculator</td>
</tr>
<tr>
<td>punny!</td>
</tr>
<tr>
<td>drink roulette (on its way!)</td>
</tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="0">
<tr>
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
</tr>
<tr>
<td id="punnyButton"><img src="arrow1.png" width="45"/></td>
</tr>
<tr>
<td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td>
</tr>
</table>
</div style="clear: both">
<div id="content">
my apps :)
</div>
And here's the JavaScript:
var foo = document.getElementById('lifeCalculatorButton');
foo.onClick = function (){
document.getElementById('content').innerHTML = 'foo';
};
Try changing the onclick event to all lowercase.
var foo = document.getElementById('lifeCalculatorButton');
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
EDIT
The below code works in both Firefox and IE. I've changed the event from foo.onClick to foo.onclick. Make sure your javascript block is at the end of the page or the call to getElementById will return null. Also, you should close the unclosed <img> tag and remove the style="clear: both" from the second to last closing </div> near the bottom of your page.
<html>
<head>
<link rel="Stylesheet" type="text/css" href="apps.css" />
<title>my apps</title>
</head>
<body>
<div id="breaks">
<img src="homeicon.png" />
<br /><br /><br /><br /><br />
<div id="appTable" style="float: left">
<table border="1" id="appTable">
<tr><td>life calculator</td></tr>
<tr><td>punny!</td></tr>
<tr><td>drink roulette (on its way!)</td></tr>
</table>
</div>
<div id="arrowTable" style="float: left">
<table border="1">
<tr><td id="lifeCalculatorButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="punnyButton"><img src="arrow1.png" width="45"/></td></tr>
<tr><td id="drinkRouletteButton"><img src="arrow1.png" width="45"/></td></tr>
</table>
</div>
<div id="content">
my apps :)
</div>
</body>
</html>
<script type="text/javascript">
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
</script>
EDIT
If you are using an external javascript file you must use the window.onload event handler to register your handler to ensure the page has completely loaded.
window.onload = function () {
var foo = document.getElementById('lifeCalculatorButton')
foo.onclick = function (){
document.getElementById('content').innerHTML = 'foo';
};
};
First, you seem to have a typo here:
<td id="lifeCalculatorButton"><img src="arrow1.png" width="45"</td>
The <img> tag is not closed properly.
You also have to either move the <script> include at the bottom of your document or attach to the window load event to make sure that your script is executed after the elements in question appear in the DOM:
window.onload = function () {
var foo = document.getElementById("lifeCalculatorButton");
// ...
};
It may be overkill but this could be a good excuse to introduce yourself to jQuery or similar framework. It makes this kind of work trivial to implement. See this fiddle for a working examlpe using jQuery.
If you don't want to use jQuery your javascript looks ok as this fiddle works.
As others have said make sure you are not assigning the event handler until after the DOM is loaded. This is done in the pure javascript fiddle above using the following code
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var foo = document.getElementById('Clickable');
foo.onclick = function (){
alert("See It Works");
};
}//]]>
On a side note following a comment above, the cursor will not change on hover as the browser is still interpreting the element as what ever it is, in this case, a table cell. The only difference is that it now has an event assigned to it. To have the cursor change you will need to do this using CSS.
Does it need to be the td that holds the id? Why not use an a tag to wrap around the image (and as suggested close the img tag correctly with />). Apply the onclick to the a tag and call a function with a return false afterwords to bypass normal behavior... and obviously, in your onclick you can call whatever function u want