Dear all,
this is embarrassing - but I can't figure out how to do it:
what I want to achieve is to design an elegant way to test a larger JavaScript code... for that purpose, I want to find a way to test several of my methods (and their results to different inputs).
My idea is to create a simple document, in which several HTML buttons can be clicked by a user, and then each time on click call the same JavaScript function and submit an input to it (which needs to be defined in an intelligent way - e.g. in the form of the button's ID or name element); the JavaScript method to be tested would then return a value based on that input - and finally, I want to replace the button with the return value. This may sound odd at the beginning, but I hope that this would be a very elegant (and visual) way for the user to test the result of several methods of my larger JavaScript project. In order to be versatile here, I want the structure to be quite abstract.
So, what's not working is the hand-over of the handle of the calling button, in order to replace it via jQuery with the return value. And what is also not working is my idea of how to submit my input from some property of the button (what I called the "value" or "name" of it) - i.e., the way of how to define the input for the method to be tested in connection with the HTML definition of the button.
Here is the Javascript that I have: it relies on jQuery, and another JavaScript code that contains the function that is being called:
<script type="text/javascript">
// bind all items that have a class of "clickitem" to an event handler thatactually calls the function, submitting the DOM reference (so that, e.g., buttons can be replaced with the result)
$(document).ready( function(){
for(var i in $('.clickitem'))
{
$(this).bind('click', function() {
call($(this).val(), $(this));
});
}
});
function call(test,handler){
testArray=test;
if(testFunction(testArray)) {
$("#debugInfo").append("Yes, function says it is true!");
handler.parents().append("Yes, function says it is true!");
console.log("Yes, function says it is true!");
} else {
console.log("No, Sir - sorry: not true!");
handler.toString().parents().append("No, Sir - sorry: not true!");
}
return;
};
</script>
So, the idea is that the external function, "testFunction", would return a result that is either true or false (based on the submitted input, testArray (on which the function does some magic - that is working, so don't bother about it), and then either return a good or bad message. Note that I have played around with different ways of submitting the message here.
So, again: I'd need some help with:
a) a suggestion of how to read out and submit the function's input in direct connection with the button (class 'clickitem'), and
b) how to pass on the handler to the DOM element of class 'clickitem' that is being clicked on (and which has this input connected to it - note that there will be several of the same type), in order to simply replace it with the return answer.
Did I make it clear? Can one of You please tell me what I am not seeing?
Thanks for reading this!! Really, great appreciation!
Best regards,
Björn