Is there any way to submit a JavaScript statement in a form, (like alert("nefvn");) and then execute it's value as a statement?
[..omitted..]
<script type="text/javascript"
function doSomething(){
//Like this?
var a = document.forms[0].elements[0].value;
a;
return;
//Or just this?
document.forms[0].elements[0].value;
}
</script>
</head>
</body>
<form>
<input type="text" id="doThis">
<input type="button" onClick="doSomething()"
</form>
[..omitted..]
eval(a) will (try to) execute the javascript code in a. Try to avoid it for any non-testing purposes.
Set OnClick to "var = 'X'; doFunction()".
Related
I am trying to use javascript to create a web calculator. I hope that users can calculate the result when they click the different buttons. However, there is an error in line16(Uncaught TypeError: Cannot read property 'onclick' of null). I hope someone could help me. These are my codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var btnadd,btnsub,btnmul,btndiv;
btnadd = document.getElementById('btnadd');
btnsub = document.getElementById('btnsub');
btnmul = document.getElementById('btnmul');
btndiv = document.getElementById('btndiv');
btnadd.onclick() = function(){
cal(add());
}
function cal(func){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
parseFloat(num1);
parseFloat(num2);
var result;
result = func(num1,num2);
document.getElementById('result').value = result;
}
function add(num1,num2){
return (num1+num2);
}
function sub(num1,num2){
return (num1-num2);
}
function mul(num1,num2){
return (num1*num2);
}
function div(num1,num2){
return (num1/num2);
}
</script>
</head>
<body>
<form>
num1:<input type="text" id="num1" /><br>
num2:<input type="text" id="num2" /><br>
<input type="button" id="btnadd" value="add" />
<input type="button" id="btnsub" value="sub" />
<input type="button" id="btnmul" value="mul" />
<input type="button" id="btndiv" value="div" /><br>
result:<input type="text" id="result"/>
</form>
</body>
</html>
You need to either add the defer attribute to your script or put it at the end of the body.
Putting JS code in the head means that it will be run before the page is fully parsed. That means that there is no element with the id of btnadd just yet. If you add the defer attribute, then it will wait for the page to be parsed before running the script. Putting at the end of the body has the same effect.
In terms of your code itself, you need to set the onclick property. You cannot assign a function like that. Also, do val2 = parseFloat(val2) rather than parseFloat(val2). (similarly for val1) because here you need to reassign the value
Because you didn't define the onclick correctly
Instead of
btnadd.onclick() = function(){
cal(add());
}
try
btnadd.onclick = function(){
cal(add);
}
Check this codepen : https://codepen.io/zecka/pen/NWrejxO
Note that there are other errors in your code that will prevent you from making it work as you want.
I'm trying to have a user input a string or number on the page, hit submit and have console.log print the string just entered, however as much as I tried it will not print.
Am I missing something here? ( sorry for indentation)
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<input type="submit" id = "submit()">
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
return console.log(test);
}
</script>
</body>
</head>
</html>
This code will give the result as you expect.you cannot return console.log in return function to get value and also dont use form so that it will always look for action in these kind of cases
function submit() {
var test = document.getElementById("userInput").value;
console.log(test);
return test;
}
<div>
<input id="userInput" type="text">
<button onclick = "submit()"> Submit</button>
</div>
You're doing a few things wrong. Just read the below code, I left explaining comments for you.
<html>
<head>
<body>
<form>
<input id="userInput" type="text">
<button type="button" id="submitBtn" onclick="submit()">Submit</button> // ID - can't be used for submitting a function
</form>
<script>
function submit() {
var test = document.getElementById("userInput");
alert(test.value); // console.log() - is like a void function and it can't be returned
}
</script>
</body>
</head>
</html>
If you look in the console you'll see it's logging a reference to the element, not the value entered in it.
This is because your variable test stores a reference to the element.
var test = document.getElementById("userInput");
You need
var test = document.getElementById("userInput").value;
use Onclick attribute for Submit button! and Also the type of input should be button to prevent the refreshing.
<form>
<input id="userInput" type="text">
<input type="button" onclick= "submit()">
</form>
in JavaScript Code add the value property.
var test = document.getElementById("userInput").value;
Please check the below code. I think this is what you want. The problem was hooking up the event
<form>
<input id="userInput" type="text">
<input id="myBtn" type="submit">
</form>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
var test = document.getElementById("userInput");
console.log(test);
return false;
});
</script>
I'm trying to change the contents of an input tag using a JS function but nothing I tried seems to work. Here's what I tried:
function go (){
document.getElementById("input").innerHTML.value = 5;
};
<body>
<input type="number" id="input">
<button onclick="go()">go</button>
</body>
Would really appreaciate it if someone show me how this is done
just use document.getElementById("input").value
function go (){
document.getElementById("input").value = 5;
};
<body>
<input type="number" id="input">
<button onclick="go()">go</button>
</body>
You don't want to change the innerHTML, just the value of the input element (which is an attribute). So this should work. I changed to a string because that's what attributes usually are, but it shouldn't matter.
document.getElementById("input").value = "5";
This question already has an answer here:
html javascript reverts to default after javascript has run
(1 answer)
Closed 6 years ago.
I am working on client side rendering. I have a input tag where i put a number and click button. Onclick of button it should add more input tags to my page .But the problem is it adds given number of inputs and reset page for no reason.
Please explain me why it is reseting page ?
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button onclick="addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
}
</SCRIPT>
</HTML>
don't forget the default behavior of a button in a form is submit. That will be triggering a reload. Change your code to this:
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button type="button" onclick="addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
}
</SCRIPT>
</HTML>
1.Your onclick event act like ah form submit.
2.No return statement is there.so the page was reload.
3.If you apply within action of form form action="some.php" the page redirect with that page like http://firsthtml/some.php
4.More reference and demo of from submit
5.So apply with return false statement .Its will prevent your page resting.And apply click function into form submit see the below code
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form onsubmit="return addnos()"> <!--return with function-->
<input name="nos" id='nos' type="text">
<button >Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
return false; //its will prevent page refresh
}
</SCRIPT>
</HTML>
<HTML>
<script src="js/main.js"></script>
//for converting document.getelementbyid() to _()
<body>
<div id="form_place">
<form>
<input name="nos" id='nos' type="text">
<button onclick="return addnos()">Enter</button>
</form>
</div>
</body>
<SCRIPT>
function addnos(){
var nos = _('nos').value;
for (i=0;i < nos;i++){
manddy = document.createElement('INPUT');
manddy.setAttribute("id", 'name'+i+1);
_('form_place').appendChild(manddy);
}
return false;
}
</SCRIPT>
</HTML>
Change your code like this. This will prevent the default behaviour because, in HTML you call return someFunc() so is going to return whatever the function returns. And the function returns a false! so in the end, it returns false to the onclick method and the default behaviour is prevented while your code is executed.
Hope it helped :)
I'm trying to assign a variable from a html text input value and then have that variable used in a function that uses the jquery ":contains" selector to hide divs that don't match the variable...here is the code I have...
<head>
<script language="JavaScript" type="Text/JavaScript" src="jquery.js"></script>
<script language="JavaScript" type="Text/JavaScript">
var myform = document.forms[0];
var FilterText = myform.FilterText.value;
function FilterBlocks()
{
$("div.block").hide();
$("div.block:contains(FilterText)").show();
}
</script>
</head>
<body>
<form action="#">
<input class="navButtons" type="text" name="FilterText">
<input class="navButtons" type="button" name="FilterButton" value="Filter Videos" onMouseUp="FilterBlocks()">
<br /><br />
</form>
<div class="block"><a href="1.html"><img src="images/1.jpg">This is the title<a></div>
</body>
I tried doing an alert() with the variable that I an trying to use but it's coming back undefined.
Any help would be greatly appreciated...thanks!
Try $("div.block:contains(" + FilterText + ")").show(); instead. You'll need to 'escape' special characters too ((, ), etc), but this should work on simple strings.
And BTW, what you are coding in called Javascript, not Java.
you might want to do it this way,
function FilterBlocks(){
$("div.block").hide();
$("div.block:contains("+FilterText+")").show();
}
and also, calling var myform = document.forms[0];, in your code above, would result myform as undefined because DOM is not yet ready.
you might want it this way,
<script language="JavaScript" type="Text/JavaScript">
$(function(){
// call it when DOM is ready
var myform = document.forms[0];
var FilterText = myform.FilterText.value;
function FilterBlocks(){
$("div.block").hide();
$("div.block:contains("+FilterText+")").show();
}
});
</script>
for better jQuery style codes, I suggest this,
<input class="navButtons" type="button" name="FilterButton" value="Filter Videos" onMouseUp="FilterBlocks()">
to just,
<input class="navButtons" type="button" name="FilterButton" value="Filter Videos" >
your jQuery would be,
<script language="JavaScript" type="Text/JavaScript">
$(function(){
// call it when DOM is ready
var myform = document.forms[0];
$('.navButtons:button').click(function(){
var FilterText = myform.FilterText.value;
$("div.block").hide();
$("div.block:contains("+FilterText+")").show();
});
});
</script>