We Keep Coding

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 to get label's id?

This is index.html
<html>
<head>
<script language="javascript" type="text/javascript" src="add.js"></script>
<script language="javascript" type="text/javascript" src="get.js"></script>
</head>
<body>
<div id="list">
<form id="programs" name="programs">
</form>
<input type="button" value="add" onClick="add();" />
<input type="button" value="delete" onClick="get();" />
</div>
</body>
</html>
This is add.js
var program_number = 0;
function add()
{
var program_name = "program_sample";
var formID = document.getElementById("programs");
var labelTag = document.createElement("label");
var inputTag = document.createElement("input");
var txtNode = document.createTextNode("program " + program_number);
var brTag = document.createElement("br");
// set input attribute
inputTag.setAttribute("type", "checkbox");
inputTag.setAttribute("name", program_name);
inputTag.setAttribute("value", "program" + program_number);
// set label attribute
labelTag.setAttribute("id", "program_label" + program_number);
labelTag.appendChild(inputTag);
labelTag.appendChild(txtNode);
labelTag.appendChild(brTag);
formID.appendChild(labelTag);
program_number++;
}
This is get.js
function get()
{
var programs = document.programs;
for(var i = 0; i < programs.length; i++)
console.log(programs[i].id);
}
Hello, I want to get the label's id dynamically. add.js code makes it. (below)
<label id="program_label0>
<input type="checkbox" name="program_sample" value="program0" />
program 0<\br>
</label>
If those run normally, the result can be "program_label1", "program_label2", "program_label3" ...
but the result of get.js is just a blank. What should I do to get label's id ..?
or Where my code is wrong ..?

Inside your 'get.js' you could try either
var programs = document.getElementById("programs");
or
var programs = document.forms["programs"];
or
var programs = document.forms[0];
The last one will work only if the form you are referring to is only presented first inside DOM tree.

I see a few problems:
Inputs in the beginning html are outside the form...(Please refer to w3schools form basics)
Instead of inputTag.setAttribute("type", "checkbox");, you should use inputTage.type = "checkbox";
There is no such thing as documents.programs. To access your programs DOM element, please do as in your add.js and document.getElementById("programs");
You do not seem clear on how basics work. - var formID = document.getElementById("programs"); will not return a formID... will return a DOM element. Please read more basic tutorials. Start at - w3schools

First: Why are you using setAttribute over setting the properties?
Second:
var programs = document.getElementById("programs");
More than likely you mean to access window.programs in your code, which only works had that element been in the document when you loaded the page.
When you create an element and add it to the DOM, it does not update the global object (here called window), with that new property name.

You should access form element with `document.programs.elements[i]. So you have missed "elements" which is collection of form elements.

Find and replace an element in html using jquery

I am trying to load a HTML page into a variable in Jquery, then replace a div element tag in it, so I can get my own id into the div. I am using this way to dynamically add more users in my web app, and then do a batch POST to the back end, and put the info into json.
Here is my html that I am loading.
info.html
<div id="user">
<label>name</label>
<input type="text" name="name">
<br>
<label>email</label>
<input type="text" name="email">
<br>
</div>
I load this with jquery and I want to replace <div id="user"> with something
like <div id="user 1">
I have the following jquery script that has a counter to keep track of what number to append onto the div tag.
$(document).ready(function(){
var make_counter = (function(){
var count = 0;
return function(){
count++;
return count;
};
});
var _counter = make_counter();
$("#add").click(function(){
var counter = _counter();
var content = $('<div>').load("static/info.html"); //using python flask
console.log(typeof(content)); //is of object type
console.log(typeof(content.html())); //is of type string
console.log(content.html());//shows up as an empty string
console.log(content);//prints out the object
content = content.html().replace('<div id="user ">','<div id="user "'+counter+'>'); // doesn't work.
$("#add_div").append(content); //appends correctly if I remove the above line, but all divs have the some id.
});
});
Any suggestions would be great thanks. Also, is the is the best way going about keeping track of how many times a new user is added(as in using a counter and keep track of how they are added, and then do the same when I click submit and create the json)?

.load() is asynchronous. make your changes in side callback.
.load("..",function(){
// your changes
});
Also $( "selector" ).load() is the syntax. So create a div and load content to it.
// modified code structure
<div id"content"></div>
$(document).ready(function(){
var make_counter = (function(){
var count = 0;
return function(){
count++;
return count;
};
});
var _counter = make_counter();
$("#add").click(function(){
var counter = _counter();
$("#content").load("static/info.html",function(){
content = $("#content").html().replace('<div id="user ">','<div id="user "'+counter+'>');
$("#add_div").append(content);
}); //using python flask
});
});

Using JavaScript, you can use the .attr() method to target id, then set its value like so:
$("#content").attr("id", "user_" + counter);

Try an $.each() function for #user like this:
$('#user').each(function(indexNumber){
$(this).replace('<div id="user'+indexNumber+'"></div>');
});

How do I acces javascript database from a html form?

I just want to acces a database in javascript from a form in the html file and pass it in a javascript function.
So what I realy want to do is take the value that I input in the html and use it in a function that takes some object data and do some simple math.
So the form i want to use looks like this:
<form name="mmForm">
<label for="element1">E1</label>
<input type="text" id="element1">
<label for="element2">E2</label>
<input type="text" id="element2">
<input type="button" value="Calculate" onclick="procesForm_mm()">
<div id="resultfield_mm">Result:</div>
</form>
And here is the javascript data i want to acces:
var Fe = new Object();
Fe.denumire = "Fier";
Fe.A = 56;
Fe.Z = 26;
Fe.grupa = VIIIB;
Fe.perioada = 4;
What I want to do is to acces the Fe.A = 56; from the Fe object while I have the inpun of "Fe" in the html file and then pass it in this function that seems to not work:
function procesForm_mm() {
var e1 = document.mmForm.element1.value;
var e2 = document.mmForm.element2.value;
result_mm = e1.A + e2.A;
document.getElementById("resultfield_mm").innerHTML = result_mm;
}
I look for some methods to do this trick and help me get on my tracks my first project as a web developer :) so anyone who will help me i will be verry greatefull.

result_mm = e1.A + e2.A;
That part will give you a error since a value does not have properties, what you have to do is this:
function procesForm_mm() {
var e1 = document.mmForm.element1.value;
var e2 = document.mmForm.element2.value;
result_mm = parseInt(e1) + parseInt(e2);
document.getElementById("resultfield_mm").innerHTML += result_mm;
}
Link http://jsbin.com/ifeluf/1/edit