I haven't used jQuery since a long time, and I have forget a lot of things in it.
I tried to change the element text when an element clicked but it didn't work, I don't know why.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<h1>practice test</h1>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$("h1").click(() => {
console.log("event trigered");
$(this).text("this element is clicked");
});
</script>
</body>
</html>
You can do something like this. where you send the event with the click and then get the target, that is clicked, and then you can edit the content of that with .text()
$("h1").click(event => {
const clickedElement = $(event.target);
console.log("event trigered");
clickedElement.text("this element is clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>practice test1</h1>
<h1>practice test2</h1>
<h1>practice test3</h1>
<h1>practice test4</h1>
Have you tried using html() function instead of text()?
Also, you can check this StackOverflow page, if you'll still have problems with it: How to change a text with jQuery
Related
I am looking to manipulate the DOM of a page and in one area I need to return the below:
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
As
<p class="styles_label__gDrbZ"><span>PHL</span> <span>Review</span></p>
I cannot seem to work out how to do this - any help much appreciated
There are multiple ways to achieve this, two approaches which immediately I can think of is -
:nth-child() Selector
.insertAfter()
Below is the implmentation using the :nth-child(), selecting the first child which is the <span> tag within the <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("p span:nth-child(1)").append(" ");
});
</script>
</head>
<body>
<p class="styles_label__gDrbZ"><span>PHL</span><span>Review</span></p>
</body>
</html>
Summary
I'm currently working on a project where I have to have a textarea element with an id of editor that updates a div element with an id of preview with its value as the user types into it. Currently, the preview element only updates with the text once the user stops focusing on the editor element, however, I want it to update immediately as the user types. I know this would be easy to achieve in React but is there a way to do it in plain JavaScript? This is the code I have so far:
The Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
</body>
</html>
JAVASCRIPT
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('change', (event) => {
console.log(event);
preview.textContent = event.target.value;
})
Any help appreciated.
Change the event to input instead of change. input is triggered every time the value of an element changes even while it still is in focus. change event on the other hand will be triggered when an element is changed and then loses focus.
Read more: https://html.com/attributes/textarea-onchange/#ixzz7AsNuUXNU
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('input', (event) => {
console.log(event);
preview.textContent = event.target.value;
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
</body>
</html>
this is working code,
You need to put your javascript after the html code, javascript is scripting language whaich means it executes line by line so if you put it before preview and editor element then you are trying to access them before there are initialized, and it wont work, when you put javascript code after html code then code will work as textarea element is already initialized and availbale to use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Markdown Previewer</title>
</head>
<body>
<div id="content">
<textarea id="editor">
</textarea>
<div id="preview">
</div>
</div>
<script>
console.log('yes')
const preview = document.getElementById('preview');
const editor = document.getElementById('editor');
editor.addEventListener('change', (event) = > {
preview.textContent = event.target.value;
})
</script>
</body>
</html>
I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});
I have an .outerdiv in which dynamically html elements are added through script.
Inside that div there is an anchor for that anchor i want to bind an event or access that inner text i tried using jquery but something fails please help out.
Here goes glitch link which i have tried
UPDATE
One More thing I want to mention is I don't have control on script.js assume its like plugin . what ever i can do is through my js.
UPDATE
As per suggestions i included my alert inside document.ready still not working
> this is a script.js code which i don't have control, i cant edit this.
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
The issue is with script's defer attribute:
Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
This is ultimately causing the appending of the element after all the scripts are executed, thus in the previous script code the element is not available. Remove the attribute defer from the script tag, your script should be:
<script src="/script.js"></script>
You can place the alert after the appending the link:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js"></script><!---this script i have written in js part of snippset"-->
<script>
$(document).ready(function () {
$(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
});
</script>
<script>
$(document).ready(function () {
alert($(".outdiv a").text());
});
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You can try this:
$(document).ready(function () {
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
alert($(".outdiv a").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
<script>
// alert($(".outdiv a").text());
</script>
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
You are populating the a tag in document ready(when the page is completely loaded), but you're alerting the (yet not existing) contents during page load.
So just put the alert in the document ready block.
You may use the alert function inside document ready in your dynamic files
$(document).ready(function(){
alert($(".outdiv a").text());
});
Extracting the text out of the anchor tag isn't possible until the element has been added to the DOM. So, executing the script before the initialization of the element won't work.
On the other hand, you also mentioned to bind an event to that anchor tag. Well, that's possible using the on method. You can try this:
$(".outdiv").on('click', 'a', function() {
console.log('clicked');
// You can extract the text of the clicked anchor here
console.log($(this).text());
});
Use holdReady
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js"
alert($(".outdiv a").text());
$.holdReady( false );
});
});
$(document).ready(function(){
$(".outdiv").append("<p><a href='#'>i am a link</a></p>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/jquery-3.3.1.min.js"></script>
<script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
</head>
<body>
<h1>Hi there!</h1>
<p>
I'm your cool new webpage. Made with Glitch!
</p>
<div class="outdiv">
</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
<script>
$(document).ready(function() {
$.holdReady( true );
$.getScript( "https://button.glitch.me/button.js", function() {
alert($(".outdiv a").text());
$.holdReady( false );
});
});
</script>
</body>
</html>
I'm new to jQuery and jQuery mobile. I'm trying to understand how to execute a function when a button is clicked. I've tried the methods I've seen in tutorials, but it isn't working for me. Here's my code. I get the 'document is ready' alert, but don't get an alert when the button is clicked. I've also tried it with the .click() outside of the ready function. If anyone can find what I'm doing wrong, it will be greatly appreciated. Thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function() {
alert('document is ready');
$('#testButton').click(function() {
alert('testButton has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Test Button
</div>
</div>
</body>
</html>
Remove the # from the id value in your a tag. # is a jQuery selecter which species its an ID. Change this line
Test Button
TO:
Test Button
Replace:
Test Button
with:
Test Button
The id shouldn't have the "#".