Develop Reference

How to use screenshot api?

I am practicing to capture screenshot of webpage by using api.
I want to change the img src, on the button click.
Code is as follows:
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url"
id="input" value="" />
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
<button onclick="changeimg()">Capture</button>
</section>
And this is JavaScript:
<script type="text/javascript" charset="utf-8">
var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>

You should get the input value inside the function and the img id is sh not screenshot
Now it's work
const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url" id="input" value="" />
<button onclick="changeimg()">Capture</button>
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
</section>

How to get input text value in javascript

I want to output a manipulated input value of a text type input tag, but it seems to be harder than I thought it will be. I don't want to use alert or console.log kind of outputting, but appending to the page as new content. Here I didn't manipulate the input, since I'm not even able to output it, which is my first goal then.
my html code for the corresponding part is:
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
and here is the full javascript. I linked it at the end of the html before the closing body tag, after a jquery-1.12.2.min.js linking.
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
var inPuttext = document.getElementById("iPf").innerHTML;
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
appendOutput(outPutfield, inPuttext);
});
});
I can't figure out why it doesn't work. When I click the send button the only thing happens is that the "output" disappears from the #oPf div.

Use value property not innerHTML to get value from input element.
Get the value in click handler to get updated value.
$(document).ready(function() {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function() {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
But, If you are using jQuery:
$(document).ready(function() {
"use strict";
$('#sendd').click(function() {
$('#oPf').html($("#iPf").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try this:
use .value to get entered value of input box.
get value inside calling function so that you can get entered value in inputbox
$(document).ready(function () {
"use strict";
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value; // use .value to get entered value of input box , get value inside calling function so that you can get entered value in inputbox
var outPutfield = document.getElementById("oPf");
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try $("#oPf").html($("#iPf").val());
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
Refer : Js Fiddle
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Just add this, you will get output in output div.
HTML UPDATE
<div id="inputnav">
<button id="sendd" onClick="fn()">SEND</button>
</div>
JAVASCRIPT UPDATE
function fn(){
var inPuttext = document.getElementById("iPf").value;
document.getElementById("oPf").innerHTML = inPuttext;
}

inPuttext should be
var inPuttext =document.getElementById("iPf").value
above code should come inside the click event.because we need to get the input value after it entered.My answer as follows
$(document).ready(function () {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
console.log(what);
where.innerHTML = what;
}
;
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
console.log('asd');
});
});

How do I get a <div> on a nearby node in the DOM?

I'm trying to write some JavaScript that could be used throughout my app, and allow a checkbox to show/hide a nearby element.
If I have these elements:
<div class="optionable" style="display: block;">
<div class="row">
<div class="col-md-2">
<input checked="checked" class="form-control"
data-val="true" id="IsActive"
name="IsActive"
onclick="CheckboxOptionsToggle(this);"
type="checkbox" value="true">
</div>
<div class="col-md-8">
Chapter
</div>
</div>
<div class="row options">
<div class="col-md-12">
Some data here...
</div>
</div>
</div>
And this script:
CheckboxOptionsToggle = function (thisCheckbox) {
debugger;
var optionElement = $('.options');
if (thisCheckbox.checked) {
$(thisCheckbox).closest(optionElement).show();
} else {
$(thisCheckbox).closest(optionElement).hide();
}
}
But this isn't working. I would like the checkbox with the onclick="CheckboxOptionsToggle(this);" to trigger the options element in the same optionable div to either show or hide.
What am I doing wrong in my JavaScript/jQuery?
UPDATE: This is my final solution:
$('.optionToggle').on('change', function () {
$(this).closest('.optionable').find('.options').toggle(this.checked);
});
$(document).ready(function () {
var toggleElements = document.body.getElementsByClassName('optionToggle');
for (var i = 0; i < toggleElements.length; i++) {
var thisCheck = $(toggleElements[i]);
thisCheck.closest('.optionable').find('.options').toggle(thisCheck.prop('checked'));
}
});
<div class="optionable" style="display: block;">
<div class="row">
<div class="col-md-2">
<input checked="checked" class="form-control optionToggle"
data-val="true" id="IsActive"
name="IsActive"
type="checkbox" value="true">
</div>
<div class="col-md-8">
Chapter
</div>
</div>
<div class="row options">
<div class="col-md-12">
Some data here...
</div>
</div>
</div>

Be more generic, and stop using inline event handlers
$('[type="checkbox"]').on('change', function() { // or use class to not attach to all
$(this).closest('.optionable').find('.options').toggle(this.checked);
}).trigger('change');
FIDDLE

You can change it like
CheckboxOptionsToggle = function (thisCheckbox) {
debugger;
var optionElement = $('.options');
if (thisCheckbox.checked) {
$(thisCheckbox)..closest('div.optionable').find(optionElement).show();
} else {
$(thisCheckbox)..closest('div.optionable').find(optionElement).hide();
}
}

I would stay away from .closes, because it is so specific, instead I would go with more reusable code like so:
HTML:
<input type="checkbox" id="toggler" data-target-class="some-div" class="toggler" value="myValue" checked> Toggle Me
<div class="some-div">
Some Text within the div.
</div>
JS:
$('#toggler').on('click', function() {
var targetClass = $(this).data('target-class');
$('.' + targetClass).toggle($(this).checked);
});
JSFiddler: https://jsfiddle.net/ro17nvbL/
I am using data element on the checkbox to specifiy which divs to show or hide. This allows me to not only hide/show divs but anything n the page, and not only one instance but as many as needed. Way more flexible - still does the same job.

How do I remove the whole last html line in div?

What I basically am trying to accomplish is a form, where one can add a whole html line dynamically using javascript using one button, or remove an existing line using another.
I got the add function to work, yet I cannot seem to figure out the remove function.
Here is my code:
window.onload = function(){
var addHw = document.getElementById("addhw");
var removeHw = document.getElementById("removehw");
// Here is my add function
addHw.addEventListener('click', function () {
var homeworkGrade = document.createElement('input');
homeworkGrade.className = 'grade';
homeworkGrade.type = 'text';
homeworkGrade.size = 3;
var overallGrade = document.createElement('homework');
overallGrade.className = 'homework';
overallGrade.type = 'text';
overallGrade.size = 3;
var form = document.getElementById("assignments");
var r = "HW <input class=\"grade\" type = \"text \"size=\"3 \">/<input class=\"homework \" type = \"text \" size= \"3 \"><br />";
form.insertAdjacentHTML('beforeend',r);
});
// Here is my attempt at the remove function:
removeHw.addEventListener('click', function () {
var form = document.getElementById("assignments").lastChild;
var hw = document.getElementById("homework");
var grade = document.getElementById("grade");
});
}
<form id="myForm">
<div id="assignments">
<!-- add HWs here -->
HW <input class="grade" type="text" size="3">/<input class="homework" type="text" size="3"><br />
HW <input class="grade" type = "text" size="3 ">/<input class="homework " type = "text " size= "3 "><br />
HW <input class="grade" type = "text "size="3 ">/<input class="homework " type = "text " size= "3 "><br />
</div>
<div>
<!-- add curve here -->
<input type="checkbox" name="curve" />Curve + 5?
</div>
<div id="resultsarea ">
<p>
<!--add buttons-->
<button type="button" id="compute">Compute!</button>
<button type="button" id="addhw">Add HW</button>
<button type="button" id="removehw">Remove HW</button>
<button type="button" id="clear">Clear</button>
</p>
<!-- add the results here -->
<div id="result"></div>
</div>
</form>
I tried the removeChild and tried to remove the last child of "assignments", with no luck.
If someone would like to comment on my code and if it's efficient or provide me some comments that would benefit my progress, I'll be the most thankful.

By far the easiest way to do it is to update your code so that your "HW" are wrapped (e.g. in a span), and give all of these spans a class (e.g. "hw").
If you want them to be in different lines anyway, you may as well use a p or a div and remove the <br />.
window.addEventListener('load', function(){
var addHw = document.getElementById('addhw');
var removeHw = document.getElementById('removehw');
var hwHTML = '<div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>';
var form = document.getElementById("assignments");
// Add hw.
addHw.addEventListener('click', function () {
// A lot of core were useless here as you only
// use the string at the end (and it is sufficient).
form.insertAdjacentHTML('beforeend', hwHTML);
});
// Remove hw.
removeHw.addEventListener('click', function () {
form.removeChild(form.querySelector(".hw:last-child"));
});
});
<form id="myForm">
<div id="assignments">
<!-- add HWs here -->
<div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
<div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
<div class="hw">HW <input class="grade" type="text" size="3" />/<input class="homework" type="text" size="3" /></div>
</div>
<div>
<!-- add curve here -->
<input type="checkbox" name="curve" />Curve + 5?
</div>
<div id="resultsarea ">
<p>
<!--add buttons-->
<button type="button" id="compute">Compute!</button>
<button type="button" id="addhw">Add HW</button>
<button type="button" id="removehw">Remove HW</button>
<button type="button" id="clear">Clear</button>
</p>
<!-- add the results here -->
<div id="result"></div>
</div>
</form>

It would be great to place every HW into its container. Because removal of the whole container is much easier.
Javascript:
(function(){
var addHw = document.getElementById("addhw");
var removeHw = document.getElementById("removehw");
// Here is my add function
addHw.addEventListener('click', function () {
var form = document.getElementById("assignments");
var r = "<div>HW <input class=\"grade\" type = \"text \"size=\"3 \">/<input class=\"homework \" type = \"text \" size= \"3 \"></div>";
form.insertAdjacentHTML('beforeend',r);
});
// Here is my attempt at the remove function:
removeHw.addEventListener('click', function () {
var form = document.getElementById("assignments");
var lastHW = form.lastChild;
if(lastHW) {
form.removeChild(lastHW);
}
});
})();
Html:
...
<div id="assignments">
<!-- add HWs here -->
<div>HW <input class="grade" type="text" size="3">/<input class="homework" type="text" size="3"></div>
<div>HW <input class="grade" type = "text" size="3 ">/<input class="homework " type = "text " size= "3 "></div>
<div>HW <input class="grade" type = "text "size="3 ">/<input class="homework " type = "text " size= "3 "></div>
</div>
...
Example: https://jsfiddle.net/61ytuoyb/

Can you try wrapping the individual assignments in an assignment and add a unique identifier to each assignment ?
<div id="assignments">
<div id="assignment_1">HW etc ...</div>
<div id="assignment_2">HW etc ...</div>
<div id="assignment_3">HW etc ...</div>
</div>
Use like a global counter variable to create the unique identifier for each assignment.
Then use the javascript
var idToDelete;
addHw.addEventListener('click', function () {
idToDelete = this.id; //not sure this is how to obtain the id in pure js.
});
removeHw.addEventListener('click', function () {
var parent = document.getElementById("assignments");
var child = document.getElementById("assignment_" + idToDelete);
parent.removeChild(child);
});
This off the top of my head. Untested code.

How to put multi JavaScript function in a page?

Here is again the full code i Use but without css, i only want to run these 2 javascripts, can anyone send me the full code edited?
here is my demo page http://iscree.orgfree.com
Here i have jquery-1.4.2.js but it works to both codes when they are in Specify pages, not same page!
<script type="text/javascript" src="http://www.iscreen.orgfree.com/js/jquery-1.4.2.js"></script>
<style type="text/css">a {text-decoration: none}</style>
<!Here is js1---------->
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
});//]]>
</script>
<!Here is js1---------->
<!Here is js2---------->
<script type='text/javascript'>//<![CDATA[
$(windows).load(function(){
// Optional code to hide all divs
$("div").hide();
// Show chosen div, and hide all others
$("input").click(function ()
{
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});//]]>
</script>
<!Here is js2---------->
<!Here example1---------->
Click a button to make it visible:<br /><br />
<input type="button" value="One" class="one" />
<input type="button" value="Two" class="two" />
<input type="button" value="Three" class="three" />
<input type="button" value="Four" class="four" /><br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
<!Here example1---------->
<!Here example2---------->
<a href="#" id='hideshow'>here</a>
<div id='content' class="content" style="display: none;">
<div id="container" style="width:300px">
<div id="title" style="background-color:#161616;">
<center><h1 style="margin-bottom: 0; color: white;">iScreen Desktop</h1></center>
</div>
<div id="row1left" style="background-color:#636262;height: 150px;width:150px;float:left;">
<center>Some text</center>
</div>
<div id="row1right" style="background-color:#161616;color: white;height: 150px;width:150px;float:left;">
<p>Content goes here</p>
</div>
<div id="row2left" style="background-color:#636262;height: 60px;width:150px;float:left;">
<center><form name="tokey"><input type="text" name="key" onblur="if (this.value == '') {this.value = 'Kerko';}" onfocus="if(this.value == 'Kerko') {this.value = '';}" value="Kerko" size="10"><input type="button" onClick="ToKey()" value="Go"></form></center>
</div>
<div id="row2right" style="background-color:#161616;color: white;height: 55px;width:150px;float:left;">
<center><img src="./users/desktop/img/shdown.png" height="19" width="19"> <font size="5" style="color: white">Shkyqu</font></center>
</div>
<div id="footer" style="background-color:#161616;color: white;clear:both;text-align:center;">
By SMKproduction.eu5.org</div>
</div>
</div>
<!Here example2---------->

Simply put them in document.ready
$(document).ready(function () {
jQuery('#hideshow').live('click', function (event) {
jQuery('#content').toggle('show');
});
$("div").hide();
$("input").click(function () {
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});

Why you don't just put all the code inside the same "ready" call?:
<script type="text/javascript">
$(document).ready(function(){
$('#hideshow').live('click', function(event) {
$('#content').toggle('show');
});
$("div").hide();
// Show chosen div, and hide all others
$("input").click(function ()
{
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});
</script>
Beware that window.load and jQuery.ready has the same purpose: to execute the functio when the browser has finished loading the document. You don't need both of them...