I have div and hidden span on it. I want to show it by button clicking. My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script type="text/javascript" src="/static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
And my js file:
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
When i button clicked span does not show. Why? It shows very fast and than hidden again.
Chrome developer tools console doesn't show errors too.
Thank you.
Try adding return false to your button onClick() event.
Like this:
<button id="register-submit" onclick="show_element('register-username-label'); return false;" class="btn">Register</button>
You need to define your function before your first call to the function is being made. Normally it can be achieved by putting the function code inside a script tag nested inside the head of your HTML.
Like this:
<head>
<script type="text/javascript">
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
Sorry but this code works:
<html>
<head>
<script>
function show_element (id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</head>
<body>
<div>
<span id="register-username-label" class="label label-important" style="visibility: hidden">Username can't be empty</span>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</div>
</body>
</html>
EDIT
I just read your edit. Btw i think your absolute path may causes problem.
Try this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>register page</title>
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<script type="text/javascript" src="./static/js/test.js"></script>
</head>
<body>
<form id="register-form">
<label>Username<span id="register-username-label" class="label label-important" style="visibility: hidden;">Username can't be empty</span></label>
<input id="register-username-input" type="text" placeholder="Type username..."/>
<button id="register-submit" onclick="show_element('register-username-label')" class="btn">Register</button>
</form>
</div>
</body>
</html>
Related
So I'm trying to get an alert through jquery code. I have 3 inputs so login.password and button and when writing your login and password you should get an alert (log+pass). The error that i'm getting is:
GET http://localhost/php5/jquery-3.3.1.min.js net::ERR_ABORTED.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PHP </title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$("#send").click(function(){
var log=$("#login").val()
var pass=$("#password").val()
alert(log+pass)
})
})
</script>
</head>
<body>
<input id="login" placeholder="Login"><br>
<input type="password" id="password" placeholder="Password"><br>
<input type="button" id="send" value="send">
<div class="status"></div>
</body>
</html>
try to change
<script src="jquery-3.3.1.min.js"></script>
to
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it works for me
To insert HTML code using javascript dynamically, we use innerHTML after a tag is selected. Simple, but for me is not working. I've seen some links on SO and internet to do that.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css"/>
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much){
for(var i=0; i < how_much; i++){
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much"/>
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/>
<div id="my_container"></div>
</body>
</html>
When I press the button, nothing occurs. Dynamic content isn't added on the page. I tested on Firefox and Chrome. Even the simplest div_cont.innerHtml = 'asdasd' won't work.
This code is so simple but isn't working. Is there a specific reason for this behavior?
Pay attention to your capitalization of .innerHTML:
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
It should be div_cont.innerHTML = 'asdasd'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css" />
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much) {
for (var i = 0; i < how_much; i++) {
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much" />
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" />
<div id="my_container"></div>
</body>
</html>
The code so far:
<!DOCTYPE html>
<html>
<head>
<title>Project 506</title>
<script type="text/javascript" src="sweetalert.min.js"></script>
<script src="https://ajax.googlesapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="sweetalert.css" type="text/css" />
<style type="text/css">
body {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#first").click(function () {
sweetAlert("Oops...", "Something went wrong!", "error");
});
});
</script>
</head>
<body>
<h1>Message Boxes</h1>
<input type="button" id="first" value="Just a Notification" />
<input type="button" id="second" value="Successfully Completed!" />
<input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>
I'm not clear on why the sweetAlert animation still doesn't pop up when I click on the first button. I've tried moving the lines of <script> into different parts of the script, but it still doesn't work. So how can I solve this problem?
Check you jQuery url.
It should be:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});
I have a JS <script> function and then a HTML<form> script and I am trying to implement them into my webpage side by side. However, When I implement them into the page they automatically put themselves one above the other as if there was a <br> in my script.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script><form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
All of the information I have found says that I would need to download the .js from the server and modify some of its code and remove the <br>that may be inside it but I am not sure if there is any other way to do it.
<style>
.se-flair {
display: inline-block !important;
}
</style>
Add this to your HTML and it's done.
You can just wrap the script tag in a div with an id or classname and style it like so:
HTML:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>test</TITLE>
<BODY>
<div id='left'>
<script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"></script>
</div>
<form action="http://www.qrz.com/lookup" method="post" style="display:inline"><b>QRZ callsign lookup:</b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form>
</HTML>
CSS
#left {
float: left;
}
If you just want to remove the you could do as mentioned before with the float property, i make the example:
/* Styles go here */ #blockUsr{ float:left; margin: 5px; }
<!DOCTYPE html> <html> <head> <TITLE> test </TITLE> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <BODY> <div id="blockUsr"> <script type="text/javascript" src="http://se-flair.appspot.com/4146548.js"> </script> </div> <form action="http://www.qrz.com/lookup" method="post" style="display:inline"> <b> QRZ callsign lookup: </b> <input name="callsign" size="8" type="text" /> <input type="submit" value="Search" /> </form> </body> </html>