I have this code:
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
How can I set data-amount from a Javascript function?
you can try following
(assuming you have the class eway-paynow-button only to the script element)
document.getElementsByClassName("eway-paynow-button")[0].dataset.amount = 1000;
Or a more generic solution
var elems = document.getElementsByClassName("eway-paynow-button");
for (var i = 0; i < elems.length; i++) {
if(elems[i].getAttribute('src') === "https://secure.ewaypayments.com/scripts/eCrypt.js") {
elems[i].dataset.amount = 1000;
}
}
To expand on nikhil's solution, you can change the text like so:
document.getElementsByClassName("eway-paynow-button")[0].setAttribute("data-amount", "2000");
document.getElementsByClassName("eway-button")[0].firstElementChild.innerHTML = "Pay Now ($20.00)";
You can Use my jQuery Solution to change your button text problem
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$(".eway-paynow-button").attr("data-amount",2000);
});
</script>
</body>
</html>
Related
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)
I'm trying to include a separate .js file so I can pull in a class I created but it doesn't work, can someone tell me why?
playercharacter.js
function PlayerCharacter() {
this.x = 0;
this.y = 0;
this.dx = 5;
this.dy = 5;
}
PlayerCharacter.prototype.sayHello = function()
{
alert ('hello');
};
index.html
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
You forgot wrap your JS-code into the <script> tags
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
Your JavaScript code is not in a script tag.
<script>
var player = new PlayerCharacter();
player.sayHello();
</script>
You need to surround the code in the body with a <script> tag.
I have the follwing code. I want to get the value of the selected value of the dropdownlist once the user changes it or to have the default value to be displayed by alert(). I need to use alert() from within the < body > of the html. Is that possible?
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="phonegap-1.4.1.js">
</script> <script type="text/javascript" src="JS/Util.js"></script>
<script type="text/javascript" src="JS/Language.js"></script>
<script type="text/javascript">
function dropdown(){
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
</script>
</head>
<body onload="dropdown();"> <div id="main3"></div> <form><select id = "numberlist"><option>12</option><option>24</option><option>36</option></select>
Use the code:
selectElement.options[ selectElement.options.selectedIndex ];
to find the index that is selected.
So where you say var drp = document.getElementById("numberlist"); you can now find the value of the index by doing:
var value = drp.options[ drp.options.selectedIndex ].value;
Add the code into an onchange event so that whenever you change the selectedIndex of the element, you will be able to obtain it's value:
Here is a DEMO
Try this Following...Mark it as answer if it helps you
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="phonegap-1.4.1.js"> </script> <script type="text/javascript" src="JS/Util.js"></script>
<script type="text/javascript" src="JS/Language.js"></script>
<script type="text/javascript">
function dropdown()
{
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
</script>
</head>
<body onload="dropdown();">
<div id="main3">
</div>
<form>
<select id="numberlist" onchange="show()">
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<script type="text/javascript">
function show() {
var e = document.getElementById('numberlist');
var txt = e.options[e.selectedIndex].text;
alert(txt);
}
</script>
</form>
</body>
</html>
add this function within script tag.
function pickvalue(id){
var drp = document.getElementById(id);
alert(drp.value);
}
and add function call like this.
<select id = "numberlist" onchange="pickvalue(this.id)">
Here is a JQuery method:
$value = $("#numberlist option:selected").text();
alert($value);
<html>
<head>
<script type='text/javascript' language='javascript' src="http://localhost/javascript/jquery-1.4.2.js">
</script>
<script type='text/javascript' language='javascript'>
$(document).ready(function(){
$("#button").mousedown(function(){
dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
});
});
</script>
</head>
<body>
<select id="dropDownMenu"><option>Test</option></select><br>
<input id="button" type="button">
</body>
</html>
Try using the text() function:
$("#button").mousedown(function() {
var selectedItemText = $('#dropDownMenu :selected').text();
alert(selectedItemText);
});
Your code dropDownMenu = $("#dropDownMenu");
alert(dropDownMenu.options[0].text);
Here dropDownMenu is a JQuery object. So dropDownMenu.options is not defined. Use dropDownMenu[0] or dropDownMenu.get(0) to get the first DOM element which is a
<select>...</select>