I have something like this for index.html
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<h2 class= "question1">How many letters are in "hello" ?</h2>
<form class="answers">
<input type="submit" name="answer1" value="1" class="answer" onclick="wrongAnswer(this.name)">
</form>
</body>
<script src="JavaScript.js"> </script>
</html>
and this is the JavaScript.js
function wrongAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor = "red";
}
when the button is pressed the background gets red but it doesn't last. It goes away in about 1 second. I want it to be changed as long as the page is not refreshed. How to do that ?
Thanks for your time
You are using a submit button input. When it is pressed, the browser tries to send the form's data to a server and this reloads the page. You can use a button element instead:
<h2 class= "question1">How many letters are in "hello" ?</h2>
<button name="1" onclick="wrongAnswer(this.name)">1</button>
Your form element is triggering a page refresh on submission of it's contents.
This is normal.
Typical practice is to intercept said form's onSubmit event and preventDefault().
See below for a practical example.
Note the handleSubmit() and onSubmit references in the respective JavaScript and HTML portions of the following code.
// Handle Submit.
function handleSubmit(event) {
event.preventDefault() // Prevent Default.
}
// Wrong Answer.
function wrongAnswer(name)
{
document.getElementsByName(name)[0].style.backgroundColor = "red";
}
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>
<h2 class= "question1">How many letters are in "hello" ?</h2>
<form class="answers" onSubmit="return handleSubmit(event)">
<input type="submit" name="answer1" value="1" class="answer" onclick="wrongAnswer(this.name)">
</form>
</body>
<script src="JavaScript.js"> </script>
</html>
Related
When text is written into the input box and then the button is clicked, I want the text (value) to be added to the array I have created for it (the array is called 'subject'). The text (value) from the input box is not being added... why?
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="" action="index.html" method="post">
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
</form>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
Actually, You code is working. The input value is appending to the array. But the Issue is, You are using form. So when you click the button, It will submit the form right after add the value to array. So page will refresh and the array will become empty.
Just remove form tag, if you don't want to submit data.
var subject = [];
function addSubjects() {
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Prueva tu Suerte</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="namesInputter" value="">
<button onclick="addSubjects()">Add Player</button>
<span id='S'></span>
<span id='V'></span>
<span id='O'></span>
<span id='P'></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="function.js"></script>
</body>
</html>
If you want to use form submit with jQuery, you can use like this:
Html
<form>
<input type="text" id="namesInputter" value="">
<button type="submit">Add Player</button>
</form>
JavaScript
var subject = [];
function addSubjects(e) {
}
$("form").submit(function(e){
e.preventDefault();
namesInputted = document.getElementById('namesInputter').value;
subject.push(namesInputted);
console.log(subject);
});
So I was programming my search bar and I can't quite know why it's not working. I am wanting when a user types "forums" it says a message and when they click okay it sends them to the forums, but I was testing to see if it would display the alert it and I couldnt get it to say anything.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>website name / slogan</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
</head>
<body>
<div class="row">
<div class="span12">
<form method="get" action="/" class="form-inline" >
<input name="q" class="span5" id="searchBar" type="text" placeholder="Click below on how to use" />
<button type="submit" id="submit" class="btn btn-primary"> <i class="icon-search icon-white"></i></button>
</form>
</div>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
Javascript
function myNavSystem() {
var mySearchBar = document.getElementById('searchBar');
if(mySearchBar = "forums")
document.getElementById('submit');
alert("you have tried accessing forums")
else
alert("You have entered invalid text, try again.")
}
One obvious mistake is that you forgot curly braces in your if / else statement (and semicolons).
if(mySearchBar.value == "forums") {
document.getElementById('submit');
alert("you have tried accessing forums");
} else {
alert("You have entered invalid text, try again.");
}
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>
I've made a small page that just has this as the HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hi</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<link type="text/css" href="js/jquery-ui-1.9.1.custom/css/black-tie/jquery-ui-1.9.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js"></script>
<link type="text/css" href="css/main.css" rel="Stylesheet" />
<script src="js/main.js"></script>
<script>
$(main());
/* or $(document).ready(main()); */
</script>
</head>
<body>
<div id="loginDiv" class="popupDiv">
<div id="usernameDiv">
<label for="username">username</label>
<input type="text" id="username"/>
</div>
<div id="passwordDiv">
<label for="password">Password</label>
<input type="password" id="password"/>
</div>
</div>
<div id="introDiv">
<div class="headerDiv">
<button id="loginButton">Login</button>
</div>
</div>
</body>
</html>
And then I have my main.js:
function main()
{
var $loginButton = $('#loginButton');
var $loginDiv = $('#loginDiv');
$loginDiv.dialog({ autoOpen: false });
$loginButton.click(function() {
$loginDiv.dialog("open");
//alert('sfsdf');
});
}
I can trigger alerts, but selectors will not return any elements if the .ready() handler is specified in the head.
I have tried moving it to the end of the body tag and everything works fine. According to the JQuery docs, the entire DOM and all images and resources are supposed to be loaded before the handler gets called. What gives?
Firefox 16.0.2 on Linux x86
JQuery 1.8.2
JQuery UI 1.9.2 (not really used for the purposes here)
Because you are calling your function!
$(main()); <--() means run it
You want to assign a reference to it
$(main); <-- no ()!
I've downloaded the YUI library for the nice SimpleEditor. When installed and created a simple test. It will not display right.
this is how it should look like.
http://developer.yahoo.com/yui/examples/editor/simple_editor.html
and this is how it looks with my example:
http://ms.robertcabri.nl/testing.php
Here is the code of my testing page:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/assets/skins/sam/skin.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/editor/assets/skins/sam/simpleeditor.css" />
<link rel="stylesheet" type="text/css" href="http://ms.robertcabri.nl/js/yui/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/element/element-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/container/container_core-min.js"></script>
<script type="text/javascript" src="http://ms.robertcabri.nl/js/yui/editor/simpleeditor-min.js"></script>
<script type="text/javascript">
window.onload = function () {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
var editor = new YAHOO.widget.SimpleEditor('blaat', {
dompath: true,
handleSubmit: false
});
editor.render();
};
</script>
</head>
<body>
<form action="#" method="post" id="test">
<fieldset>
<legend>test</legend>
<textarea name="blaat" id="blaat" cols="30" rows="5"></textarea>
</fieldset>
</form>
</body>
</html>
Well found the answer myself.
YUI SimpleEditor documentation is really bad. The Main styling has to be set for this element.
in my example i've set a wrapper around the textarea and then the styling picks up.
<div class="yui-skin-sam">
<textarea></textarea>
</div>
You also could place this class on a form element or on the body. It has to be a parent of the textarea node you want to replace with the simpleeditor
You need to put the "yui-skin-sam" class on your body tag, for one thing.