I'm working currently with Highcharts, I'm trying to create a function that use the data I write in a number field and present it as a new point in the chart once I click on add point, the add point showing in the link is to add point randomly to the chart.
http://jsfiddle.net/BlackLabel/2kw1b5o0/
<div id="container"></div>
<input type="number" id="add" name="new-point" value="">
<button id="add-point">Add point</button>
<script>
var chart = Highcharts.chart('container', {
series: [{
data: [1, 2, 3, 4, 5]
}]
});
function getValue(add) {
ext = document.getElementById(id).value; //value of the text input
alert(text);
return false;
}
var x= document.getElementsByClassName("new-point").value;
document.getElementById('add-point').addEventListener('click', function() {
chart.series[0].addPoint();
});
There were a few issues with your code :
Your getValue function needs the name of the field as a parameter and that parameter will be used in the document.getElementById() function to retrieve the fields you want to read data from
You need to return the read value by using the return keyword
Your chart expects a number. So, you need to parse read with Number.parseFloat()
Then, your event handler needs to call the getValue function and provided the name of the field :
function getValue(fieldName) {
let value = document.getElementById(fieldName).value; //value of the text input
return Number.parseFloat(value);
}
document.getElementById('add-point').addEventListener('click', function() {
let value = getValue("add");
chart.series[0].addPoint(value);
});
Updated JSFiddle
Just get the value of input as you are doing in getValue function. You can either return the value from that function like
function getValue() {
var val= document.getElementById("add").value,
return val;
}
and now you can use it like
document.getElementById('add-point').addEventListener('click', function() {
var val = getValue();
chart.series[0].addPoint(val);
});
Or you can directly access the value in you click handler as
var el = document.getElementById("add")
document.getElementById('add-point').addEventListener('click', function() {
chart.series[0].addPoint(el.value);
});
Here is your updated fiddle
document.getElementById(id).value returns a String value, and addPoint is expecting an Int, try this:
document.getElementById('add-point').addEventListener('click', function() {
var point = document.getElementById('add').value;
chart.series[0].addPoint(parseInt(point));
});
From HighChart's documentation, addPoint doesn't accept parameters of type String : https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
Since the value of the input returns a String, you need to parse it to a float or a number :
function getValue(id) {
let inputValue = document.getElementById(id).value;
return parseFloat(inputValue);
}
Now you can call getValue in your EventListener :
chart.series[0].addPoint(getValue('add'));
Related
I have numerous input boxes that I'm trying to store the names of into an array. I'm using this currently to get the names:
var getImplementedNames = function (selector){
$(selector).each(function() {
console.log($( this ).attr('name').replace('imp-', ''));
});
}
console.log(getImplementedNames('[id^=imp]'));
This works, but now I'd like to add all the reslts to an array. I've tried;
var array = [getImplementedNames('[id^=imp]')];
console.log(array);
Which returns an undefined array.
I'm not sure of how this is supposed to be properly handled.
Use .map()
var getImplementedNames = function (selector) {
return $(selector).map(function () {
return $(this).attr('name').replace('imp-', '');
}).get();
}
usage
console.log(getImplementedNames('[id^=imp]'));
Read Return Value from function in JavaScript
Your function isn't currently returning anything. Try:
var getImplementedNames = function (selector){
return $(selector).map(function() {
return $( this ).attr('name').replace('imp-', '');
});
}
console.log(getImplementedNames('[id^=imp]'));
I tried using this code to obtain the var value using jQuery. For some reason name equals null or undefined, and I can't seem to figure it out.
<asp:TextBox
ID="Text_Email"
runat="server"
CssClass=""
Width="234px">Email</asp:TextBox>
var name = $("#<%=Text_Email.ClientID%>").value; // name == undefined
Here is my main script:
$(document).ready(function () {
$("#<%=send_info.ClientID%>").click(function () {
// var name = document.getElementById("#<%=Text_Name.ClientID%>").value;
var name = $("#<%=Text_Email.ClientID%>").value;
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(name) == false) {
$(this).val("");
$("#error_email_adress").removeClass('email_valid');
$("#error_email_adress").addClass('email_invalid');
return false;
} else {
$("#error_email_adress").removeClass('email_invalid');
$("#error_email_adress").addClass('email_valid');
alert("Message sent");
return true;
}
});
});
This part also confuses me. Why does this occur? Can someone explain to me why name is defined here?
$("#<%=Text_Email.ClientID%>").click(function () {
var name = this.value;//name != undefined;
});
whereas here name is undefined
var name = $("#<%=Text_Email.ClientID%>").value; // name == undefined;
Thank you for any help.
jQuery does not have value but val() function for textbox,
Try this,
var name = $("#<%=Text_Email.ClientID%>").val();
Your code will be
$("#<%=Text_Email.ClientID%>").click(function () {
var name = $(this).val();// you will get value in name by this statement.
});
Try this instead of what you've written
$(this).val()
Note that jquery's syntax is almost straightforward.The function concerning the value of an element is $.val() , you can set an element's value by passing it a string like :
$(this).val("the desired value");
or you can get the element's value by not passing it anything.
$("#<%=Text_Email.ClientID%>").click(function () {
var name = this.value; //<-- 'this' here is a DOM HTML Object which has .value property
var elem = jQuery(this); //<-- converts the DOM Object into a jQuery object, jQuery does not have .value property
var nameVal = elem.val(); //<-- get the value the jQuery way
});
Reading material:
jQuery .val()
I can't figure out how to have a javascript function which accepts a parameter correctly.
I can get the function working perfectly if I don't use a input parameter because I can do this:
var x = MyFunction;
But the moment I have to do this
var x = MyFunction(e);
Then it breaks.
I tried to work around this by setting the input parameter afterwards, but I can't get anything to work. How can I do this?
http://jsfiddle.net/TxMmG/
var MyFunction = function() {
var otherResult = function() {
alert("Hi");
},
input, objToAlert = function() {
return input;
};
return {
objToAlert: objToAlert,
input: input,
otherResult: otherResult
}
}();
var e1 = "test";
//var y = MyFunction(e); //this does not work if i add a parameter to function - moment i put parenthesis i get problems
var x = MyFunction;
x.input = e1; //also cant set the input here
x.objToAlert();
x.otherResult();
You put a () after the function definition, so the function is called and MyFunction is actually the object returned by the function, not the function itself.
Do like this:
var MyFunction = function() {
// ...
}; // No () here
The problem is that your function returns an object. Therefore you're assigning an object to a var y. You can not treat object as a function.
function testTask06()
{
var cipherText = document.getElementById('cipherTextBox').value;
var indexCharacter = document.getElementById('indexCharacterTextBox').value;
document.getElementById('plainTextBox').value = (decryptMessage(cipherText, indexCharacter, plainArray, cipherArray));
}
I want to get values from textbox called 'cipherTextBox' and 'indexCharacterTextBox', then use those values in my function decryptMessage and then display result in textbox 'plainTextBox'. It doesnt work but i'm wondering if it's because my function decryptMessage is wrong.
This basic example works
function foo() {
var cipherText = document.getElementById('cipherTextBox').value;
var indexCharacter = document.getElementById('indexCharacterTextBox').value;
document.getElementById('plainTextBox').value =
decryptMessage(cipherText, indexCharacter, [], []);
}
function decryptMessage(a, b) {
// dummy function
return a + b;
}
document.getElementById("button").addEventListener("click", foo, false);
There's probably something wrong with your decryptMessage function. We need to see that.
How can I pass a string value by reference in javascript.
I want this kind of functionality.
//Library.js
function TryAppend(strMain,value)
{
strMain=strMain+value;
return true;
}
//pager.aspx
function validate()
{
str="Checking";
TryAppend(str,"TextBox");
alert(str); //expected result "Checking" TextBox
//result being obtained "Checking"
}
How to do this. ?
You cannot pass a value by reference in JS. You could create an object with a function to do this for you:
function TryAppend(originalValue) {
// Holds the value to return
this.Value = originalValue;
// The function joins the two strings
this.Append = function (append) {
this.Value+=append;
return true;
}
}
You can then use this in any method as follows:
function AnyProcedure() {
var str = "Checking";
var append = new TryAppend(str);
if (append.Append("TextBox")) {
alert(append.Value); // Will give "CheckingTextBox"
}
}
Each time you call append, the Value string will be appended to. I.e.
If you then did:
append.Append(" Foo");
append.Value would equal CheckingTextBox Foo.
You need to return the String instead of true !!
function TryAppend(strMain,value) {
strMain=strMain+value;
return strMain; //you need return the 'String Value' to use in it another method
}
//pager.aspx
function validate() {
str="Checking";
str = TryAppend(str,"TextBox");
alert(str); //expected result "Checking" TextBox
//result being obtained "Checking"
}
Create a global variable (say gblstrMain) outside the function TryAppend and then set its value to strMain inside the function.
var gblstrMain;
function TryAppend(strMain,value)
{
strMain=strMain+value;
gblstrMain = strMain;
return true;
}
//pager.aspx
function validate()
{
str="Checking";
TryAppend(str,"TextBox");
str = gblstrMain;
alert(str); //expected result "Checking" TextBox
//result being obtained "Checking"
}
Since you are particular about "return true" in the TryAppend function, we can achieve by this workaround.