I'm learning jQuery & JavaScript from scratch and cannot wrap my head around why css cannot be added with jQuery. Basically, I'm trying to see whether the the sentence bolds when the user clicks on the first sentence. I have been referencing w3school and external resources, but not sure why there is an error.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Question 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function() {
$("h3").click(function() {
$('pText').css("font-weight", "bold");
document.getElementById('pText').innerHTML = "this is updated paragraph";
});
});
</script>
</body>
</html>
You have missed to prefix the id symbol (#) in the selector:
$('#pText').css("font-weight", "bold");
I will also suggest you not mix up vanilla JS and jQuery unnecessarily.
You can replace
document.getElementById('pText').innerHTML = "this is updated paragraph";
with the following equivalent jQuery:
$('#pText').html("this is updated paragraph");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h3>Click on this heading to update below paragraph </h3>
<p id="pText">this is a paragrah</p>
<script>
$(document).ready(function () {
$("h3").click(function () {
$('#pText').css("font-weight", "bold");
$('#pText').html("this is updated paragraph"); // you can use jQuery here
});
});
</script>
</body>
Related
I have a html file (converted from docx) and it does not have any class names or ids. How can I style it using JS? For example, if I need to change the color of the heading for the below file 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" />
<script src="./script.js"></script>
<title>Document</title>
</head>
<body>
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
</body>
</html>
This is what I tried, but document.getElementByTagName() does not return the element like document.getElementById()
console.log('hello world');
Heading = document.getElementsByTagName('h1');
console.log(Heading);
Heading.style.color = 'blue';
Edit:
I tried the below code, but it returns undefined
console.log('hello world');
Heading = document.getElementsByTagName('h1')[0];
console.log(Heading);
Heading.style.color = 'blue';
You can try document.querySelector() as well.
<!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>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
</body>
<script type="text/javascript">
const header = document.querySelector('h1');
console.log(header);
header.style.color = 'blue';
</script>
</html>
One other thing to note is - we need to wait for the page to load, otherwise your javascript code runs first and returns undefined.
You can ensure javascript to run after page load using any of the below ways -
Add an event listener – document.addEventListener("load", FUNCTION);
Add onload to the body tag – <body onload="FUNCTION()">
Defer the script – <script src="SCRIPT.js" defer>
Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.
The issue in your code is that getElementsByTagName returns an array, but you're using is as if it were a single element.
Try this:
window.addEventListener('load', () => {
const heading = document.querySelector('h1');
heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
Please update your code like this. you imported the script before html.
There are two solutions. first you have to import script after html or use
window.addEventListener
window.addEventListener('load', () => {
const heading = document.querySelector('h1');
heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
I am a beginner in JavaScript and HTML. I am trying to prevent buttons from submitting forms. It is not working with my below code. It is working when I remove the type:button and return false in the code but if I remove it is always submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" onclick="myFunction1();return false;" style="font-size:24px">Button <i class="fa fa-info-circle"></i></button>
<script type="text/javascript">
function myFunction1(){
}
</body>
</html>
JQUERY
You should be able to do:
$('#formid').submit(false);
or
$('#formid').submit(function(e){ e.preventDefault(); });
To use the jquery library visit the official website
http://jquery.com/download/
PURE JS
document.getElementById('formid').addEventListener('submit', function(e) {
e.preventDefault();
});
here is your example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
return false;
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Count rabbits"/>
</body>
</html>
First of all, take care about closed pair tags. In your snippet you have unclosed script tag. Don't use button where it isn't necessary, but use the input type button instead.
I need to change the text inside a dynamically generated p element after this element is from another script.
The adobe edge script creates two p elements inside #Stage. I need to change the text inside these p elements after they are created.
I actually can change the text with the on.("click") event but i need to fire this event as soon as the p elements are genereated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf-8" src="edge_includes/edge.6.0.0.min.js"></script>
</head>
<body>
<div id="Stage">
</div>
<script type="text/javascript">
$( "#Stage" ).on( "click", "p", function() {
$("#Stage p").text("New Content");
});
</script>
</body>
</html>
Hope this helps:
$(function(){
$("<p></p>").appendTo($("#Stage"));
$("<p></p>").appendTo($("#Stage"));
$("<p></p>").appendTo($("#Stage"));
});
$("#Stage p").livequery(function () {
$("#Stage p").text("New Content");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/livequery/1.1.1/jquery.livequery.min.js"></script>
<div id="Stage"></div>
I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.
I've looked at this. But it seems that it uses div block rather than pop up.
It seems that #Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.
Try this:
tinyMCE.init({
mode: "exact",
elements: "test",
skin: "o2k7",
skin_variant: "red",
setup: function (ed) {
ed.onMouseUp.add(function (ed, e) {
var x = tinyMCE.activeEditor.selection.getContent();
if(x)
alert(x);
});
}
});
JSFIDDLE DEMO
Try Bootstrap Popover. Following is a sample code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<p data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
It works well for me, hope it will resolve your issue.
$("#myDiv").mousedown(function(){
$("#myDiv").mouseup(function(){
$("#myPopUp").show();
});
});
#myPopUp
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
hello please select the text and see
</div>
<div id="myPopUp">
popover message
</div>
I am trying to access content inside a html file that I loaded into a div using jquery.load.
My index page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="content">
</div>
</body>
</html>
My script so far looks like this:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(){
alert($(this).attr("id"));
});
});
The content.html page:
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<h1 id="header1">
Content
</h1>
<p>
This is a paragraph
</p>
<p>
This is another paragraph
</p>
</body>
</html>
So what I want to happen is:
When I click on the tag in the content div it should display that tag's id - namely "header1", but currently its just displaying "content". How can I achieve this?
Thank you in advance
Bind the event handler to every element in content.
$(document).ready(function() {
$("#content").load("content.html");
$("#content, #content *").click(function(e){
alert(this.id);
e.stopPropagation();
});
});
Or let the events propogate:
$(document).ready(function() {
$("#content").load("content.html");
$("#content").click(function(e){
alert(e.target.id); //may return undefined if no id is assigned.
});
});
Working Example: http://jsfiddle.net/5JmsP/