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
Related
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);
});
I have a confusing problem where a line of code in my function is running before a loop which is stated above it. In my HTML I have:
<textarea id="textBox"></textarea>
<button id="submitButton" onclick="parseData()">submit</button>
<div id="put"></div>
And my JS function is:
function parseData() {
var data = $("#textBox").val();
var tab = /\t/;
data = data.split(tab);
$("#put").html($("#put").html() + "<table>");
for (var i = 0; i < data.length; i++) {
$("#put").html($("#put").html() + "<tr>"+data[i]+"</tr>");
};
$("#put").html($("#put").html() + "</table>");
return;
};
The resulting html in $("#put") is this:
<table></table>
"SiO2 (%)Al2O3 (%)TiO2 (%)CaO2 (%)MgO2 (%) 8.21.25.31.51.8 45.32.52.60.210.5 65.23.48.70.0662.3 20.11.85.42.540.2 18.91.12.34.810.7"
I'm not sure why the final </table> is being placed before the for loop runs, and I'm not sure why the <tr> tags aren't being added within the for loop. Any pointers?
jQuery automatically closes up tags upon insertion. Try this.
function parseData() {
var data = $("#textBox").val();
var tab = /\t/;
var put_html = $("#put").html() + "<table>";
data = data.split(tab);
for (var i = 0; i < data.length; i++) {
put_html += "<tr>"+data[i]+"</tr>";
};
put_html += '</table>';
$("#put").html(put_html);
return;
};
However, I notice that you aren't using <td> elements. You might want to look into fixing that too.
Every time you are adding content into the html() property rather than building the entire content and adding it.
Since you are using jQuery you can bind the event using jQuery rather than adding that directly in the HTML
<textarea id="textBox"></textarea>
<button id="submitButton">submit</button>
<div id="put"></div>
$(function(){
$("#submitButton").click(function(){
parseData();
});
function parseData() {
var data = $("#textBox").val();
var tab = /\t/;
data = data.split(tab);
// Build your html
$("#put").html('htmlstructure');
return;
}
});
Also you can look for something similar like concatenating the string in an array so that you don't create string isntances each time when you append, since strings are immutable.
Good example
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
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>
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();