Can I use getElementById to change it's onclick event value? - javascript

<script type="text/javascript">
window.onload = function() {
document.getElementById('finalize_btn_top').onclick='bmlAuth();';
document.getElementById('finalize_btn_bottom').onclick='bmlAuth();';
}
function bmlAuth(){
//
}
</script>
I studied google search results and this should work but it is not working. I put it at the bottom of the page just to be sure the elements have loaded.
<input id="finalize_btn_bottom" type="image" name="" value="continue" onmouseover="this.src='<% =strFolder %>/images/b_submitorder_on.gif';" onmouseout="this.src='<% =strFolder %>/images/b_submitorder_off.gif'" src="<% =strFolder %>/images/b_submitorder_off.gif" alt="continue" onclick="bml_submit();">
What do I need to do different?
Thanks much!

Try passing in a function reference:
var $ = document.getElementById;
$('finalize_btn_top').onclick = bmlAuth;
$('finalize_btn_bottom').onclick = bmlAuth;

Related

Create Elements Thru Javascript MessUp

I am trying to create a <div><div><div><input type="text"></div></div><div> via javascript. But somehow, the code seems to be not working. I have tried to use DOM methods to create the above mentioned but nothing seems to work. Please Help!!
<html>
<head>
<script>
function newFunc2()
{
a=document.createElement('div');
b = document.createElement('input type="text"');
a.appendChild(b);
c=document.createElement('div');
c.appendChild(a);
var d=document.getElementById('new1');
d.appendChild(c);
}
</script>
</head>
<body>
<input type="button" id="btn" value="ChangeCase" onclick="newFunc2()"/>;
<div id="new1">
</div>
</body>
</html>
Try
b = document.createElement('input');
b.setAttribute("type","text"); // Here you can set radio,checkbox according to need
instead of
b = document.createElement('input type="text"');
Fiddle
To specify the type of the input you can have the setAttribute()
Docs:
document.createElement()
setAttribute()

html script variable assignment

So I have a script block:
<script>
var totalPopulation = 0;
for(xxxxx){
totalPopulation = totalPopulation + xxx
}
</script>
<tr>
<input type="text" name="censusPop" value=totalPopulation/>
<tr>
I'm still quite green to javascript. But is there a way to assign the value of a variable in a script block to a HTML element like input type? I know that the code is unreachable.
hope it will help you to understand how javascript work
<html>
<head>
<script>
var totalPopulation = 0;
function addAndShowPopulation(population) {
totalPopulation = totalPopulation + population;
var input_tag = getTag('my_input_id');
input_tag.value = totalPopulation;
}
function startAdding() {
addAndShowPopulation(10);
setTimeout( function(){startAdding();},1000);
}
function getTag(id) {
return document.getElementById(id);
}
</script>
</head>
<body onload="startAdding();">
<div>
<input type="text" id="my_input_id" name="censusPop" value="" placeholder="Total Population"/>
</div>
</body>
</html>
Yes, you just have to give an id to the input, for instance "id = my_input_id";
Then, in the javascript, just write :
$("my_input_id").value=totalPopulation;
That's how ajax works: find html elements ids and fill them dinamically using javascript values.
Just be carefull that the html in read before the JS. If not, $("my_input_id") will return Null
More so, you need to do something like this:
<tr>
<td>
<input type="text" id="censusPop" name="censusPop" value=""/>
<td>
<tr>
<!-- Other stuff -->
<script>
var totalPopulation = 10;
// or for loop, or whatever here.
var censusText = document.getElementById('censusPop');
censusText.value = totalPopulation;
</script>
</body>
HTML and JavaScript can interact, but not directly like that. The best thing to do is use <script> tags to setup code that updates the browser DOM. By putting the <script> tags after the HTML, usually at the bottom of the <body> tag, you allow the browser a chance to create the elements before you actually try to use them.
Another note: <tr> tags should contain <td> tags, it's the difference between a row and a column.
If you need to do multiple DOM manipulations, I'd suggest using jQuery is the proper way.
<tr>
<input id="censusPop" type="text" name"censusPop" value=""/>
</tr>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
// make sure, the code is executed when the DOM is ready
$(function () {
// grab the input element by its ID
var $input = $('#censusPop'),
totalPopulation = 0;
// do your population calculations
totalPopulation = ....;
// assign the value to the input element
$input.val(totalPopulation);
});
</script>

Parse xml tag attributes using Javascript or Jquery?

I have one xml. Example XML is given below
<company sample="text">
<employee id="001" sex="M" age="20">Premshree Pillai</employee>
</company>
I need to get company attribute sample value
I am trying this method
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var pic = $(currLoanXml).find('company').attr('sample');
alert(pic);
};
</script>
Its Shows Undefined in my alert box.
But i can also alert this child tag its working
var pic = $(currLoanXml).find('employee').attr('id');
alert(pic);
What is a problem. I need to get first tag attributes. Please help me.
you need to use filter() instead of find() here because company is the root element, ie currLoanXml refers to the company element. find will look for decedent elements only
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var pic = $(currLoanXml).filter('company').attr('sample');
alert(pic);
Demo: Fiddle
You go too deep
$(function() {
var currLoanXml = '<company sample="text"><employee id="001" sex="M" age="20">Premshree Pillai</employee></company>';
var sample = $(currLoanXml).attr('sample');
console.log(sample);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How do I assign the result of a function into a global variable?

I can't figure out how to assign this function's result into a global variable. I know this is a really basic thing, but can anyone help?
var pixel_code = null
function captureValue(){
pixel_code = document.getElementById("baseText").value;
return pixel_code;
}
pixel_code = captureValue();
Thanks for sharing the jsfiddle of what you were attempting. I see the concern. The captureValue() function is run asynchronously, so the console.log() shortly after defining it doesn't yet have a value. I've stripped and prodded the jsfiddle and come up with this working sample:
<html>
<head>
</head>
<body>
<h1>Welcome to the AdRoll SandBox</h1>
<textarea id="baseText" style="width:400px;height:200px"></textarea><br />
<input type="button" value="test" id="text_box_button" onclick="captureValue()"/>
<input type="button" value="get" id="text_box_button2" onclick="getValue()"/>
<script>
var pixel_code = null;
function captureValue(){
pixel_code = document.getElementById("baseText").value;
return false;
}
function getValue() {
alert(pixel_code);
return false;
}
</script>
</body>
</html>
I added a second button. Type in the textbox, push "test" (to set the value), then push "get" to get the value of the global variable.
Here's the same sample that uses jQuery and a closure to avoid the global variable:
<html>
<head>
</head>
<body>
<h1>Welcome to the AdRoll SandBox</h1>
<textarea id="baseText" style="width:400px;height:200px"></textarea><br />
<input type="button" value="test" id="text_box_button" />
<input type="button" value="get" id="text_box_button2" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
var pixel_code = null;
$("#text_box_button").click(function (){
pixel_code = document.getElementById("baseText").value;
return false;
});
$("#text_box_button2").click(function () {
alert(pixel_code);
return false;
});
});
</script>
</body>
</html>
If the page reloads, your variable will be reset to it's initial state.
You're reusing pixel_code in and out of the function, which is not a great pattern, but the code you show should work as expected. What error are you seeing? What code surrounds this code that you're not showing? Could all this perhaps be nested inside another function? (Thanks #JosephSilver for the nod.)
Please try this,
var pixel_code='';
function captureValue(){
return document.getElementById("baseText").value;
}
function getValueBack()
{
pixel_code = captureValue();
//alert(pixel_code); /* <----- uncomment to test -----<< */
}

How to call evaluateJavaScript() function from Qt?

I am not able to call a javascript function from QT .
I am using the below code
QT code :
QWebFrame *frame = m_d->m_webView->page()->mainFrame();
frame->evaluateJavaScript("displayhello()");
Here `displayhello()` is the `Javascript` function defined in the HTML file.
HTML code :
<html>
<head>
<script type="text/javascript" src="" />
<script type="text/javascript">
function displaymessage(str)
{
alert(str);
}
function displayhello()
{
alert("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onClick="displayhello()">
</form>
</body>
</html>
Can anyone give me any pointers why the Javascript function is not getting called.
I know this post is old but in case someone has the same:
Always check Dev Tools to see what the JavaScript console tells you.
You can enable devtools by adding this line tou your QT main function
QWebSettings::globalSettings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
Now by right clicking->inspect, console, you would have seen the JS interpret error.
You should have lower case 'c' in 'onclick':
<input type="button" value="Click me!" onclick="displayhello()">
QVariant holdInformation = map->page()->mainFrame()->evaluateJavaScript (QString ("displayhello ()"));
Replace map by your desired class name.
Also, try using onload.
<body onload = "displayhello()" topmargin = "0" leftmargin = "0">

Categories