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
Related
I would like to seek some help please regarding loading txt file content to variable using input element in javascript.
So i am working with java script file separate from html file, and when the user click on button to load the file from the html side as below:
<input type="file" id="selectedFile" accept=".txt" />
it fires the onchange event as below
document.getElementById('selectedFile').addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById('display').textContent = fr.result;
console.log(fr.result);
}
fr.readAsText(this.files[0]);
})
basically if i console log the fr.result as in the code up there, i can see the content with no issues, and also i have div element with id "display" and content gets updated no issues. however i am unable to get the fr.result to be stored into global variable and use it later on in my code.
I tried the below code:
let test = "";
document.getElementById('selectedFile').addEventListener('change', function () {
var fr = new FileReader();
fr.onload = function () {
document.getElementById('display').textContent = fr.result;
test = fr.result;
}
fr.readAsText(this.files[0]);
})
console.log(test);
but the test variable in console comes out empty and runs even before i choose the file with input element.
Any advices about what i missing here, and how i can get the file content using same method to be stored in variable?
Thanks!
I tried it it works like this, it was maybe because your event listener function was an anonymous function, and you can't call this in anonymous function
<input type="file" id="selectedFile">
<p id="display"></p>
<script>
var fr = new FileReader();
let test;
document.getElementById('selectedFile').addEventListener('change', x);
function x() {
fr.onload = ()=>{
document.getElementById('display').innerText = fr.result;
console.log(fr.result);
test = fr.result;
}
fr.readAsText(this.files[0]);
}
console.log(test);</script>
I've got a small problem. I want to read a var defined inside tag in DOM.
<script id="foo">
var x = 1
</script>
I can access it via:
var script = document.querySelector("#foo");
But then what? Of course
var x_value = script.x
or
var x_value = script.outerHTML.x
doesn't work. So how can I get x's value then?
Thanks for your help!
Content script runs in isolated world so it cannot access the page variables directly.
a literal numeric value can be extracted with a regexp:
var scriptText = document.getElementById('foo').textContent;
var x = parseFloat(scriptText.match(/var x\s*=\s*(-?(\d*\.)?\d+(e-?\d+)?)|$/)[1]);
a global page variable of any JSON-ifiable type can be accessed from a script element because it runs in page context:
function getPageVariable(name) {
return new Promise(resolve => {
window.addEventListener(`${chrome.runtime.id}-variable`, e => {
resolve(JSON.parse(e.detail));
}, {once: true});
var script = document.createElement('script');
document.documentElement.appendChild(script).text = `
window.dispatchEvent(new CustomEvent('${chrome.runtime.id}-variable', {
detail: JSON.stringify(window.${name})
}))`;
script.remove();
});
}
Usage:
getPageVariable('x').then(x => {
// do something with x
});
Depending on the page CSP, a different method of code injection may be required.
Once you're within the scope you should be able to access your variable from wherever you want...
<script id="foo">
var x = 1
</script>
<div id="test">
</div>
<script>
document.getElementById("test").innerHTML = x;
</script>
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
My goal is to write content in a textarea and display exactly what I am writing without have to refresh the page each letter that I type shows immediately well it is not working for some reason.
HTML:
<textarea id="Q&A" name="txtarea" rows="4" cols="50"></textarea>
<div id="out"></div>
Js:
function generate() {
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(text);
text = writer.render();
document.getElementById("out").innerHTML = text
}
document.getElementById("Q&A").addEventListener("input", function () {
generate(this.value);
});
When I try to update the div with the id of out to what I am typing using JavaScript, it does not work.
I don't know what the commonmark.Parser() does in your code. But the issue i see is, When you are calling the generate method, you are passing the value of the input field. But in your generate method signature, you don't have a parameter to accept that.
Add a parameter to your generate() method to accept the value passed in.
function generate(text) {
//do something else on text with your commonmark
document.getElementById("out").innerHTML = text;
}
Here is a working sample.
and you forgot to pass the argument parsed to the render function:
You had: text = writer.render(); I changed it to text = writer.render(parsed);
I figured it out i forgot to have text pasted in as a argument in the generate function and I forgot to pas parsed into the render function
Here is the final code:
function generate(text) {
var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse(text);
text = writer.render(parsed);
document.getElementById("out").innerHTML = text
}
document.getElementById("Q&A").addEventListener("input", function () {
generate(this.value);
});
In my HTML page i have a button which on click fetches the elements in the page and passes them on to the server.
<button type="button" class="btn btn-default" id="filter_btn" onclick="on_submit()">Submit</button>
the function call is handled by my js code like this below.
function on_submit()
{
var $start_date=document.getElementById("datepicker1").value;
var $end_date=document.getElementById("datepicker2").value;
var $vid1 = $('#vid1');
var $vid2 = $('#vid2');
var $vid1_name = $('#vid1').text();
var $vid2_name = $('#vid2').text();
var $metric = $('#metric').val();
var $frequency = $('#freq').val();
$.get('../content_focus',{type:"getData",vid1_name:$vid1_name, vid2_name:$vid2_name, vid1:$vid1, vid2:$vid2, start_date:$start_date, end_date:$end_date, metric:$metric, frequency:$frequency}, function(responseData){
alert('im done');
});
}
Now the borwer console throws an error stating "'click' called on an object that does not implement interface HTMLElement."
And none of my print statements or alert statements get executed i would like some help with this
It seems to be the problem is with,
var $vid1 = $('#vid1');
var $vid2 = $('#vid2');
$vid1 and $vid2 are HTML elements.
If you want to pass the html use,
var $vid1 = $('#vid1').outerHTML();
var $vid2 = $('#vid2').outerHTML();