We Keep Coding

JavaScript - code is not working - passing argument to function

I am trying to understand bookmark application which I found on internet,here is the link for the code https://github.com/bradtraversy/bookmarker/blob/master/js/main.js
Now in that code on line 85 he build button element with onclick event,assign it to function deleteBookmark() and passed the argument url in it which then get recieved in deleteBookmark() function on line 55 and his code works but when I tried to build similar kind of code to better understand what is happening in that application,my code does not work. I am using the code below.
<div id="divArgument"></div>
<input type="text" id="argument">
<p id="displayArg"></p>
<script>
var testArg = document.getElementById('divArgument');
var getVal = document.getElementById('argument').value;
testArg.innerHTML = '<button onclick="sendArg(\''+getVal+'\')">Display Argument</button>';
function sendArg(recVal){
document.getElementById('displayArg').innerHTML = recVal;
}
</script>

When '<button onclick="sendArg(\''+getVal+'\')">.... is executed getVal does not hold any value.
So put var getVal = document.getElementById('argument').value; inside the event handler function
var testArg = document.getElementById('divArgument');
testArg.innerHTML = '<button onclick="sendArg()">Display Argument</button>';
function sendArg(recVal) {
var getVal = document.getElementById('argument').value;
document.getElementById('displayArg').innerHTML = getVal;
}
DEMO

send variable from basic js to angular

I want to send variable in basic JS to angular in function. I want to send variable value1. as you are seeing the code I declare value1 and after script is closed I want to send the value of value1 to the function doImportAll that declared in other file.
<script>
var value1='hi';
var openFile = function(event) {
var input = event.target;
var reader = new FileReader();
reader.onload = function(){
var text = reader.result;
var node = document.getElementById('output');
var lines = reader.result.split('\n');
for(var line = 0; line < lines.length; line++){
console.log(lines[line]);
}
value1=lines[0];
node.innerText = lines[2]
document.getElementById('clicking').click();
};
reader.readAsText(input.files[0]);
};
</script>
<button id="clicking" class="btn btn-md" ng-click="doImportAll(value1)" my-i18n="modal_importAll"></button>
<div>
<input type='file' accept='text/plain' onchange="openFile(event)">
</div>
<div id='output'>
...
</div>

As already pointed out, there's no reason not to do this within an angular service. But if for whatever your reason you wish to have this function not run inside angular, you can assign value to the global window object like so:
window.value1 = lines[0];
It will then be accessible to the angular via the window object. This is not the most elegant solution and you should really consider restructuring your FileReader logic to work within angular.

You can inject the value into your angular app and then use that
angular.module('App').value('yourVar', value);
angular.module('App').controller('Controller', function ($scope, yourVar) {
console.log(yourVar);
});
Here is working example
http://plnkr.co/edit/rUCXJ0GmEb5iWf8OiBs6?p=preview

Having trouble appending javascript into my html

OK,so I am trying to pull some data from an api. The problem that I have run into is that I am able to find out the information that I am looking for, but am having trouble getting that information out of the console and onto my main index.html page.
Here is my JS code
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
$.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
console.log(info);
});
});
});
Here is my html code
<div id="search">
<h1>API Test</h1>
<input type="search" id="search-keyword">
<button id="myBtn">Try it</button>
</div>
<div id="results"></div>
By doing this, I am able to get pretty much what I am looking for. However I cannot get the data from the console to the actual page.
I have tried appendChild
var bob = document.getElementById(results);
var content = document.createTextNode(info);
bob.appendChild(info);
I have tried innerHTML
var theDiv = document.getElementById(results);
theDiv.innerHTML += info;
..and I have tried .append()
$('#myBtn').click(function() {
$(results).append(info)
})
I'm out of ideas. I realize that I probably have a small problem somewhere else that I am not seeing that is probably the root of this. Much thanks to anyone who can help me with this issue.

"results" needs to be in quotes with regular javascript and for jquery you have already decalred the results variable.
var theDiv = document.getElementById("results");
theDiv.innerHTML += info;
$('#myBtn').click(function(){
results.append(info)
})
Also since you are declaring results outside of your document ready call you have to make sure you html comes before the javascript.

<script>
var form = $('#search');
var input = $('#search-keyword');
var results = $('#results');
$(document).ready(function() {
$("#myBtn").on('click', function() {
var symbol = $("#search-keyword").val();
var resultedData = $.getJSON("http://dev.markitondemand.com/Api/v2/quote/jsonp?symbol=" + symbol + "&callback=?", function(info) {
return info;
});
var resultDiv = document.getElementById("results");
resultDiv.innerHTML += resultedData;
});
});
</script>

How could I call a JQuery function upon a button click?

I have a JQuery function that fetches and displays a page worth of images through the use of JSON files. I want to display the next set of images upon a button click, but that requires adding on a short string to the request url, which is found and stored in a var when I first run the script. I need to call this JQuery function again and pass the string var to it (lastId in code below). I am an utter noob with JavaScript in general and don't know how to go about doing that.
Here is a full version of the code:
$(function runthis(un){
var lastId;
un = typeof un !== 'undefined' ? un : "";
$('#domainform').on('submit', function(event){
event.preventDefault();
$('#content').html('<center><img src="img/loader.gif" alt="loading..."></center>');
//var lastId;
var domain = $('#s').val();
var newdomain = domain.replace(/\//g, ''); // remove all slashes
var requrl = "http://www.reddit.com/r/";
var getmore;
getmore = "?after=t3_"+un;
var fullurlll = requrl + domain + ".json" + getmore;
$.getJSON(fullurlll, function(json){
var listing = json.data.children;
var html = '<ul class="linklist">\n';
for(var i=0, l=listing.length; i<20; i++) {
var obj = listing[i].data;
var votes = obj.score;
var title = obj.title;
var subtime = obj.created_utc;
var thumb = obj.thumbnail;
var subrdt = "/r/"+obj.subreddit;
var redditurl = "http://www.reddit.com"+obj.permalink;
var subrdturl = "http://www.reddit.com/r/"+obj.subreddit+"/";
var exturl = obj.url;
var imgr = exturl;
var imgrlnk = imgr.replace("target=%22_blank%22","");
var length = 14;
var myString = imgrlnk;
var mycon = imgrlnk;
var end = mycon.substring(0,14);
myString.slice(-4);
var test1 = myString.charAt(0);
var test2 = myString.charAt(1);
var timeago = timeSince(subtime);
if(obj.thumbnail === 'default' || obj.thumbnail === 'nsfw' || obj.thumbnail === '')
thumb = 'img/default-thumb.png';
if(end == "http://i.imgur" ){
$("#MyEdit").html(exturl);
html += '<li class="clearfix">\n';
html += '<img src="'+imgrlnk+'" style="max-width:100%; max-height:750px;">\n';
html += '</li>\n';
html += '<div class="linkdetails"><h2>'+title+'</h2>\n';
/*html += '<p class="subrdt">posted to '+subrdt+' '+timeago+'</p>'; /*'+test1+test2+'*/
html += '</div></li>\n';
}
if (listing && listing.length > 0) {
lastId = listing[listing.length - 1].data.id;
} else {
lastId = undefined;
}
} // end for{} loop
htmlOutput(html);
}); // end getJSON()
}); // end .on(submit) listener
function htmlOutput(html) {
html += '</ul>';
$('#content').html(html);
}
});

The way you currently are executing the function run this doesn't ever leave you a handle to that function. This means it only really exists in the context of document.ready (what $(function()) is a shortcut for).
What you want to do instead is to keep a reference to this function for later use.
If you want to be able to put it directly into an onclick='' you will need to put the function in global,
eg:
var myFunction = function() { /*Stuff here*/}
$(myFunction)
this declares a function called myFunction and then tells jQuery to execute it on document ready
Global is generally considered pretty naughty to edit. One slightly better option would be to assign the click to the button inside your javascript
eg:
$(function(){
var myFunction = function() { /*Stuff here*/}
myFunction(); //call it here
$('#my-button-id').click(myFunction);//attach a click event to the button
)
This means that the function myFunction only exists in the scope of your document.ready, not in global scope (and you don't need onclick='' at all)

tTo add listener on some event you can use live('click',function(){}) Like yhis:
<div id="my-button">some content</div>
<script type="text/javascript">
$('#my-button').live('click',function(){
//your code
})
</script>

calling the function from <div> attribute?

For example, i have the next code:
var sale = {};
sale.MainContent = function(p) {
alert("this handler is main-content");
}
and also I have the next html div:
<div id="content-data" data-handler="MainContent">{"name":"John"}</div>
I try do do next things - parsing the content of div in jquery, like this:
var cd=$("#content-data");
var obj = jQuery.parseJSON(cd.text());
And when i get the attribute fo data-handler:
var hname=cd.attr("data-handler");
So, the next step - call the function with name hname = 'MainContent' in sale object like this(?):
sale.hname(obj);
How i can call the function name in variable?

You can do this -
sale[hname](obj);