I want to make a page with riddles and after every riddle an answer button and onclick shows the answer but also changes the value of the button into hide so when you press again the button you hide the answer. I made something but I'm a beginner in Javascript so I can't figure out what I did wrong:HERE
html:
<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>
css:
#click{
display:none;}
js:
$(document).ready(function(){
$(window).change(function(){
if (el.value == "Answer" ){
$("p#click").removeClass("click");
el.value = "Hide";
} else if ( el.value = "Hide";) {
$("p#click").addClass("click");
}
});
});
I want to be something like this: Demo but 1 single button which can change its value and change from answer to hide and from hide to answer.
Here is the updated Demo
jQuery
$(document).ready(function(){
$("#show").click(function(){
if ($(this).text() == "Show")
$(this).text("Hide")
else
$(this).text("Show");
$("span").slideToggle();
});
});
This is the working code for you :
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#click").slideToggle();
if($("#show").val() == 'Show') {
$("#show").val('Hide');
}else {
$("#show").val('Show');
}
});
});
</script>
<style>
#click{
display:none;}
</style>
</head>
<body>
<input type="button" value="Show" id="show" />
<p id="click">This is the riddle answer.</p>
</body>
</html>
Related
I'm new at Jquery and Javascript. I was trying to modify this example at: w3schools to change to url from the initial: www.w3schools.com to the second one at: www.w3schools.com/jquery and back again to the initial one when click on the button (as many times as desired), but I can not figure out how to do it. Please, include all the code in the answer, it will be easier. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});
});
</script>
</head>
<body>
<p>
<a href="https://www.w3schools.com" id="w3s">
W3Schools.com
</a>
</p>
<button>
Change href Value
</button>
<p>
Mouse over the link (or click on it) to see that the value of the href attribute has changed.
</p>
</body>
</html>
First Hover the Link You Will See... www.w3school.com .... after click on button link change ... you can check it with hover the Link. Work Link as a toggle
https://www.w3schools.com/code/tryit.asp?filename=FGOSUXX5HUOG
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>W3Schools.com</p>
<button>Change URL</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
<script>
$(document).ready(function(){
$("button").click(function(){
var myURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === myURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", myURL);
});
});
</script>
</head>
<body>
</body>
</html>
You can just use a basic if-else and check the href attribute.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var w3schoolURL = "https://www.w3schools.com";
if( $("#w3s").attr("href") === w3schoolURL )
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
else
$("#w3s").attr("href", w3schoolURL);
});
});
</script>
</head>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var w3 = "https://www.w3schools.com";
var w3Jquery = "https://www.w3schools.com/jquery";
var toggleFlag = true;
$("button").click(function(){
if(toggleFlag){
$("#w3s").attr("href", w3Jquery);
}
else{
$("#w3s").attr("href", w3);
}
toggleFlag = !toggleFlag;
});
});
</script>
<body>
<p>W3Schools.com</p>
<button>Change href Value</button>
<p>Mouse over the link (or click on it) to see that the value of the href attribute has changed.</p>
</body>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.dark {
background-color: black;
}
</style>
</head>
<body>
<input type="button" onclick="document.body.className='dark'" value="dark" />
<input type="button" onclick="document.body.className=''" value="reset" />
</body>
</html>
I have two buttons and two effects.
The button is reduced to one
If the background is black, the button name is reset,
How do I make the button name dark when the background is white?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function clickme ()
{
if(document.body.style.background =='black')
{
document.body.style.background='white';
document.getElementById("button").value="dark";
}
else
{
document.body.style.background='black';
document.getElementById("button").value="reset";
}
}
</script>
</head>
<body >
<input type="button" id="button" onclick="clickme()" value="dark" />
</body>
</html>
I think that's what you are looking for:
document.querySelectorAll('.dark')[0].style.backgroundColor == 'white' ? document.querySelectorAll('.dark')[0].style.color = black;
I would suggest downloading and using jQuery so your code is cross browser compliant and it's easier to perform whatever you want to do. That said, below is your code updated to work.
<input type="button" onclick="document.querySelector('body.dark') ? document.body.className='' : document.body.className='dark';" value="toggledark" />
Heres what i think you mean, i set up a button that on click changes the body to the background colour of the text showing on the button once clicked.
Its created in jQuery.
Here's a link to a live demo
Heres the html
<button class = 'button' > dark </div>
Heres the jQuery
$('.button').click(function() {
if ($(this).text() == 'dark') {
$(this).text('white');
$('body').addClass('dark');
$('body').removeClass('white');
} else {
$(this).text('dark');
$('body').addClass('white');
$('body').removeClass('dark');
}
});
Anyone know how to copy the text of one div into another?
My situation is that I want to make a textbox that can have information typed into it and then show up in a div.
this is my code:
$("#title").text() = $("#t").text();
"#t" is my textbox and "#title" is the div.
The answer can be in javascript or jquery I don't mind. However I'd prefer jquery.
You can easily done it like this by handling 'onkeyup' event of the input text.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<input type="text" id="txt1"/>
</div>
<div>
<p id="typed-result"></p>
</div>
<script>
$(document).ready(function(){
$('#txt1').on('keyup',function(){
var result = $(this).val();
$('#typed-result').text(result);
});
});
</script>
</body>
</html>
You could try the following:
$("#title").text($("#t").val());
$(function(){
$("#copyBtn").on("click", function(){
$("#first").text($("#txtBox").val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">This is the div.</div>
<input type="text" placeholder="enter value" id="txtBox"/>
<input type="button" value="Copy text box value to div" id="copyBtn"/>
You can do this with
$('#getDiv').text($(this).val());
Try with this working example , just type something in textarea
$(function(){
$('#getText').on('keyup', function() {
$('#getDiv').text($(this).val());
})
});
<textarea id="getText"></textarea>
<div id="getDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You can use the keyup JavaScript event, Something like this -
HTML -
<body>
<input type='text' id='one'>
<div id='two'></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
jQuery -
$(document).ready(function() {
$('#one').on('keyup', function() {
$('#two').text($(this).val());
})
})
You can use this
$("#t").keyup(function(){
$("#title").text($("#t").value());
}
$('#txtArea').keyup(function(event) {
event.preventDefault();
$('.txt-block').text($("#txtArea").val());
// #txtArea is ur textarea box where you type text.
// .txt-block is your div where textarea Text shows.
});
I am new using jQuery. in my 1st program of jQuery, I wanted to print a table of a provided number and its answer is right. but the problem I am facing the output just flashing and goes blank. if I use an alert function, the output stays till I click on "OK".
Here is my code..
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function funtable_js(){
$("button").click(function funtable_js(){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr></br>");
}
alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<form name="table" method="">
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
<table id="out">
</table>
</form>
</body>
</html>
Please help... Thank You so much to all.
It is because the button is in a form and when the button is clicked the form is getting submitted which refreshes the form.
You can prevent the default action of the click event in the click handler to solve teh problem
<button>Get Table</button>
then
$(document).ready(function funtable_js() {
$("button").click(function (e) {
e.preventDefault()
var numm = $("#num").val();
if (numm != 0) {
for ($i = 1; $i <= 10; $i++) {
var tbl = numm * $i;
var ttbl = $("#out").append("<tr><td>" + tbl + "</td></tr></br>");
}
alert("Hello World");
} else {
alert("Wrong Input. Try Again With Valid Number");
}
});
});
Demo: Fiddle
Note: Since you are using a jQuery event handler there is no need to have an onclick handler added to the element markup, even if you add it it won't work because the method funtable_js is not in the global scope.
another solution is to change the type of the button to button like
<button type="button">Get Table</button>
Demo: Fiddle
Hi you are not using any submission method on your form because its the Javascript that handles your button action. So just delete this two lines on your code:
<form name="table" method="">
</form>
And edit this line FROM:
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
TO:
<table><tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr></table>
Now try your code. It should now work. Goodluck.
It has nothing to do with jQuery, it's your HTML is incomplete. The button should be changed to this:
<button type="button"> Get Table </button>
there's no need to add the onclick event because you've added it in the document ready event.
button's default behavior is "submit", thus your page refreshes soon after you finished building the table.
You need to use <input type='button'> instead of <button> tag otherwise form will be submitted to the server each time you perform a button click.
Try This: JS Fiddle Demo
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function (){
$("#btnSubmit").click(function (){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr>");
}
//alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<form name="table">
<table><tr><td><input type="text" name="num" id="num"/><input type="button" id="btnSubmit" value="Submit"/></td></tr></table></form>
<table id="out">
</table>
</body>
</html>
Just Remove the Form Tag. Your Problem will be solved by then.
<html>
<head>
<title>Get Table</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function funtable_js(){
$("button").click(function funtable_js(){
var numm=$("#num").val();
if(numm!=0)
{
for($i=1;$i<=10;$i++)
{
var tbl=numm*$i;
var ttbl=$("#out").append("<tr><td>"+tbl+"</td></tr></br>");
}
alert("Hello World");
}
else
{
alert("Wrong Input. Try Again With Valid Number");
}
});
});
</script>
</head>
<body>
<tr><td><input type="text" name="num" id="num"/><button onClick="funtable_js()"> Get Table </button></td></tr>
<table id="out">
</table>
</body>
</html>
This question already has answers here:
How do I find out which DOM element has the focus?
(20 answers)
Closed 9 years ago.
I have a simple form with three textareas each with a different id. I want to be able to press the button and return the id of the textarea where I am typing in. Instead when I press the button I receive the id of the button which is button1:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function printTagName() {
$("#p1").html($(":focus").attr("id"));
}
</script>
</head>
<body>
<form>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
</form>
<p id="p1"></p>
<button type="button" id="button1" onclick="printTagName()">Press</button>
</body>
</html>
How can I fix this problem?
When the button is clicked focus shifts to the button. Save the element when a textarea receives focus, then print out the id of the textarea.
var focusElement = {};
$("textarea").focus(function(){
focusElement = this;
});
$("#button1").click(function(e){
e.preventDefault();
$("#p1").html(focusElement.id);
});
JS Fiddle: http://jsfiddle.net/ZYK7f/
This would work unless you need to know if whatever had focus no longer has it.
For example if the user clicks something that is NOT a textarea before hitting the button and you need to know this, the code will become quite complex
var hadFocus;
$(function() {
$("textarea").on("focus",function() { hadFocus=this.id; });
});
function printTagName() {
$("#p1").html(hadFocus || "No textarea had focus");
}
Save the TextArea that has focus last using:
var lastFocus;
$("TextArea").focus(function () {
lastFocus = this;
});
And this call the printTagName function
function printTagName() {
$("p").html(lastFocus.id);
});
Thank you very much Kevin Bowersox and everyone else for answering my question. Here is the complete code for Kevin's solution (I added a $(document).ready(function() {...}); to his solution):
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var focusElement = {};
$("textarea").focus(function(){
focusElement = this;
});
$("#button1").click(function(e){
e.preventDefault();
$("#p1").html($(focusElement).attr("id"));
});
});
</script>
</head>
<body>
<form>
<textarea id="textarea1"></textarea>
<textarea id="textarea2"></textarea>
<textarea id="textarea3"></textarea>
</form>
<p id="p1"></p>
<button type="button" id="button1">Press</button>
</body>
</html>