Consider these files:
index.html
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>
script.js
document.getElementById("remove").innerHTML = ("");
Is there a way to block script.js from executing?
This is for a CTF challange
Maybe I should also mention that I cant edit any of these.
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
document.getElementById("remove").innerHTML = ("");
}
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>
Related
I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>
i have two files index.html and index2.html
when i perform some function in index.html file that should effect index2.html file
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p button').click(function(){
$('#ajax-messagebox').removeClass('ajax-modal');
});
});
</script>
</head>
<body>
<p><button >Click ME</button></p>
<div class="xyz">This is div 1</div>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ajax-messagebox" class="ajax-modal abc">This is div2 </div>
</body>
</html>
My question is when i click on the "click me" button in index.html page i want "ajax-modal" class to be removed in index2.html
You can handle this scenario by using cookie.
Try this
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> //Cookie library
<script>
$(document).ready(function(){
$('p button').click(function(){
$.cookie("index_button_trigger", "yes"); // Set cookie
});
});
</script>
</head>
<body>
<p><button >Click ME</button></p>
<div class="xyz">This is div 1</div>
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> //Cookie library
<script>
$(document).ready(function(){
setInterval(function() {
if ($("#ajax-messagebox").hasClass("ajax-modal")) {
if($.cookie("index_button_trigger")){
$('#ajax-messagebox').removeClass('ajax-modal');
}
}
}, 1000);
});
</script>
</head>
<body>
<div id="ajax-messagebox" class="ajax-modal abc">This is div2 </div>
</body>
</html>
I have a .js file defined as follows:
<script>
function sayHello() {
alert("Hello World");
}
</script>
And I have a .html file defined as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/testCSS.css">
<title>test html</title>
</head>
<body>
<script type="text/javascript" src="js/testJS.js"></script>
</body>
</html>
How can I call the sayHello() function?
script.js
function sayHello() {
alert("Hello World");
}
index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
<script>
sayHello();
</script>
</body>
</html>
You just need to call it!
let me explain in an example.
let's say you have a button in that html that calls sayHello function.
<button type="button" onclick="sayHello ()">Say hello</button>
I think you should take a look at here.
Jus replace the link to script with content of .Js file...
Or call the function
<script>
sayHello()
</script>
The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>