I was working on something and doesn't quite get why this is not working.
I am trying to make a button that toggles between two dom elements.
My only guess would be that it is only changing the html client sided and pulling the class information from the server?
Thanks in advance
$(document).ready(function(){
$(".a").click(function(){
$(this).parent().html("<span class='b'>toggle down</span>");
});
$(".b").click(function(){
$(this).parent().html("<span class='a'>toggle up</span>");
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
When .a was clicked .b was injected as a brand new element to DOM. So,you need to declare the click event every time .b was injected.
$(document).ready(function(){
let toggleDown;
function toggleUp() {
$(".b").click(function(){
$(this).parent().html("<span class='a'>toggle up</span>");
toggleDown();
});
}
toggleDown = function() {
$(".a").click(function(){
$(this).parent().html("<span class='b'>toggle down</span>");
toggleUp();
});
}
toggleDown();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
UPDATED
Here's a more appropriate approach.
$(document).ready(function(){
const a = "<span class='a'>toggle up</span>";
const b = "<span class='b'>toggle down</span>";
$('.toggle').click(function() {
let self = $(this);
const isA = self.children(":first").hasClass('a');
self.html(isA ? b : a);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span class="toggle">
<span class="a">toggle up</span>
</span>
</body>
</html>
OR
You can use react.js or vue.js to acquire declarative approach.Currently you are using imperative approach. You can learn more at
https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2
Related
I'm a super novice to javascript, and maybe this has been answered elsewhere but I can't find it because I'm still learning the terminology.
I'm trying to use the content of a div tag to define the css values of a div it is nested within.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
alert();
var sizeOverride = document.getElementById('newdata').innerHTML
alert(sizeOverride)
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40 <!--The idea is for this to be 40px-->
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = "sizeOverride" + "px";
</script>
</body>
</html>
Eventually the plan is to use this to define the location and label of a bar on a graph, i.e. there will be in a page that utilizes hotfields to fill in the information in the div. That framework is already built, but the goal is to use that data to define the css values of that div.
There aren't any errors but nothing is happening. It's probably something simple. I appreciate you bearing with me.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
return parseFloat(document.getElementById('newdata').innerHTML.trim());
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = data() + "px";
</script>
</body>
</html>
Hello, I am new to HTML and JS therefore would like to ask for some help.
Here I want to display two different HTML elements according if statement is true or false. However, it does not work.
Could I get some help? (:
<!DOCTYPE html>
<html>
<body>
<script>
if (!user) {
<h1> there is no user </h1>
} </script>
if (user) {
<button type="button">Click Me!</button>
} </script>
</body>
</html>
Here is a native Javascript alternative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
var el = document.getElementById('content');
var content;
if (!user) {
content = '<h1>there is no user</h1>';
}
if (user) {
content = '<button type="button">Click Me!</button>';
}
el.insertAdjacentHTML('afterbegin', content);
</script>
</body>
</html>
This won't work as is unless the user variable is defined, though, but I'm assuming you already have it available at runtime.
If you have more html in this div you can use a different insert position, see the documentation about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Using jQuery you would do something like this
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
JS
if(!user){
$('body').append('<h1>There is no user</h1>')
} else if(user) {
$('body').append('<button>Login</button>')
}
See js fiddle here.
Also, note that if you want to use jquery include the script in the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Unfortunately you can't add HTML directly in a block of javascript. What you can do instead though is use jQuery to append a block of HTML.
To do this, you would load jQuery by adding this line to your head tag
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
And then replace your inline javascript with the following:
<script>
if (!user) {
$(document.body).append( "<h1> there is no user </h1>" );
}
if (user) {
$(document.body).append( "<button type='button'>Click Me!</button>" );
} </script>
I am trying to write code that writes to a file when a button is clicked. I started to experiment with letting javascript (and jquery) call a .php file:
<!DOCTYPE html>
<html>
<title>
Test Page
</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<button id="ST1U" onclick="feedback(this)">I understand</button>
<button id="ST1N" onclick="feedback(this)">I don't understand </button>
<script type="text/javascript">
function feedback(buttonElement){
var bcid= buttonElement.id;
if(bcid==='ST1U'){
$('#output').load('form.php');
}
else if(bcid==='ST1N'){
alert("We are sorry you didn't understand")
}}
</script>
And in the file 'form.php':
<script type-'text/javascript'>
alert('thank you for your responds')
</script>
However, when I click the first button, the php script does not seem to be running, as I do not get the alert message appearing. Any ideas why it is not working?
You have asked jquery to load in output id, where is the element?
Add:
<div id="output"></div>
So your code:
<!DOCTYPE html>
<html>
<title>
Test Page
</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<button id="ST1U" onclick="feedback(this)">I understand</button>
<button id="ST1N" onclick="feedback(this)">I don't understand </button>
<div id="output"></div>
<script type="text/javascript">
function feedback(buttonElement){
var bcid= buttonElement.id;
if(bcid==='ST1U'){
$('#output').load('123.php');
}
else if(bcid==='ST1N'){
alert("We are sorry you didn't understand");
}}
</script>
Try your code adding output id, i have tested it in my local your code working fine, may be you forgot to place the output id..
<!DOCTYPE html>
<html>
<title>
Test Page
</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<button id="ST1U" onclick="feedback(this)">I understand</button>
<button id="ST1N" onclick="feedback(this)">I don't understand </button>
<div id="output"></div>
<script type="text/javascript">
function feedback(buttonElement){
var bcid= buttonElement.id;
if(bcid==='ST1U'){
$('#output').load('form.php');
}
else if(bcid==='ST1N'){
alert("We are sorry you didn't understand")
}}
</script>
You can use jquery instead of javascript....
<!DOCTYPE html>
<html>
<title>
Test Page
</title>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<button id="ST1U" class="button">I understand</button>
<button id="ST1N" class="button">I don't understand </button>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
var bcid= $(this).attr("id");
if(bcid==='ST1U'){
$('#output').load('form.php');
}
else if(bcid==='ST1N'){
alert("We are sorry you didn't understand")
}
});
});
Instead of feedback(this) , you can use feedback('ST1U') to pass the ID of the element. correct your script tag
I just started using jQuery, then forgive me for noobish.
What I'm trying to do is 'get reference to a object that is wrapped in a class', but there are more classes with same name.
How can I reach the right object and get the reference to it, when the only thing that will differ it from a thousand other more objects is the text inside the div.
In this case, I'm trying to show only the text "this should be returned", that is under the classes 'ng-anyclass'.
After that, will be possible store the reference to that specific div and change it text? Or any other properties?
Here's the code:
Page 1 - the loader:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var s = $('#result').load('Page2.html .ng-anyclass .ng-anyclass .ng-anyclass');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>
Page 2 - the target page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="ng-anyclass">
<div class="ng-anyclass">
<div class="ng-anyclass">this should be returned</div>
</div>
<div class="ng-anyclass">
<div class="ng-anyclass">not this</div>
</div>
</div>
</body>
</html>
You can use :eq(0) for this:
jQuery(function($) {
$('#result').load('page2.html .ng-anyclass .ng-anyclass .ng-anyclass:eq(0)', function(){
var _this = $(this)
setTimeout(function(){
_this.find('.ng-anyclass').text('changed');
},1000);
});
});
updated plnkr Demo.
If you want to write text somewhere you can use CSS selector, like this :
$('body .ng-anyclass .ng-anyclass:eq(0) .ng-anyclass').text('your text')
eq(0) it's a shortcut of first-child, or eq(1) is nth-child(2) for example
I hope it will be help you
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API