I cannot seem to be able to add a LI to UL using jQuery. When I click on the button, nothing happens.
Here is a quick fiddle which depicts the problem I am facing:
https://jsfiddle.net/80ugxpx7/2/
The JavaScript and HTML markup in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
/* declare global variable */
var recent = []
function add_to_recent() {
var x = document.getElementById('fileno').value
recent.push(x)
$("#recent ul").append('<li>'+x+'</li>')
}
</script>
</head>
<body>
<input type="fileno" type="text"><input type="button" value="search" onclick="add_to_recent()">
<br>
<ul id="recent">
<li>lol</li>
</ul>
</body>
</html>
OK I had to move your function around a bit,
you were mixing Pure JS and Jquery so I've made it all Jquery.
https://jsfiddle.net/link2twenty/80ugxpx7/4/
<input id="fileno" type="text">
<input type="button" value="search" onclick="add_to_recent()">
<br>
<ul id="recent"></ul>
var recent = []
add_to_recent = function () {
var x = $('#fileno').val();
recent.push(x);
$("#recent").append('<li>' + x + '</li>');
$('#fileno').val("");
}
One line solution:
<input id="fileno" type="text">
<input type="button" value="search" onclick="$('#recent').append('<li>'+$('#fileno').val()+'</li>');">
<br>
<ul id="recent">
</ul>
Related
I am getting back into javascript for a job I am going to start soon. for some reason i forgot how to do a simple calculator. I dont understand why my even onclick is null when it is a button. I am sure this is a very simple answer I just cant see it.
if(document.getElementById("add").onclick == true){
alert("hey");}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a">
<input type="text" name="b">
<input type="button" value="+" name="add">
</body>
</html>
To get you started I made minor changes to your code, go through the changes and understand the use of each change.
function sum(){
var a = document.getElementById("a");
var b = document.getElementById("b");
alert(Number(a.value) + Number(b.value));
}
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src= "script.js"> </script>
</head>
<body>
<h3> Calculator: </h3>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<input type="button" onClick="sum()" value="+" name="add">
</body>
</html>
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
i want my para with id "fn_warn" to be visible when submit is clicked.
my html and js code is as,
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
First name
<input id="first_name" type="text"/>
<p id="fn_warn" style=" visibility: hidden; color: red;">#Please enter a valid name...</p>
<input class="button" onclick="tada();" type="submit" value="Submit" /> <input class="button" type="reset" />
</body>
</html>
<script>
function tada(){
var x= document.getElementById("fn_warn");
x.setAttribute("visibility","visible");
}
</script>
CSS rules are not attributes. Use the style property instead since the rule is inline:
function tada(){
var x = document.getElementById("fn_warn");
x.style.visibility = "visible";
}
Hi so yes this is a previous issue i have had, i have hit the books and whent back to basics adjusted a few things but im still having trouble getting the input value to push to the array can some one please help me get my head around this thanks
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number=["1"]
function myFunction()
{
var x=document.getElementById("box");
number.push=document.getElementById("input").value;
x.innerHTML=number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box"; style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
Here is the mistake:
number.push(document.getElementById("input").value);
push is a method, not an attribute ;-)
JSFiddle
PS: Why the ; after id="box"; ? You should fix that too..! ;-)
You were close, here's the working code:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add Number"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:auto">
</div>
</body>
</html>
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.