POP up triggered by a click - javascript

I am trying to open a popup by clicking on a button.
Please check my below code and tell me why it isn't working.
I am using getreponse popup
http://www.reussirlegmat.com/2499-2/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button id="button" >Show it</button>
<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=BaAuE&webforms_id=7152504">{
"name": "myuniqueform2"
}
</script>
<script>
var myform = GRWF2.get('myuniqueform2'),
element = document.getElementById('button');
element.addEventListener("click", function(){
myform.show();
});
</script>
</body>
</html>

On your website, something has put <p>...</p> tags around every line of your script.
<p><script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=BaAuE&webforms_id=7152504">{</p>
<p>"name": "myuniqueform2" </p>
<p>} </p>
<p></script> </p>
<p><script> </p>
<p>var myform = GRWF2.get('myuniqueform2'),</p>
<p>element = document.getElementById('button');</p>
<p>element.addEventListener("click", function(){ </p>
<p>myform.show(); </p>
<p>}); </p>
<p></script> </p>
<p></body></p>
<p></html></p>
Those are causing parse errors. Get rid of them.
I have no idea how you did this -- I suspect you edited the code with a word processor and then told it to export to HTML.

Related

Why XSS doesn't work at a created HTML Page?

Hello I'm practice on XSS-Attack in an HTML Page that I created, but it doesn't work for me.
This is the HTML Page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Try to XSS this!</title>
<script language="javascript" type="text/javascript">
var send = function () {
var data = document.getElementById("msg").value;
document.getElementById("demo").innerHTML = data;
}
</script>
</head>
<body>
<p>Enter an XSS exploit here:</p>
<textarea id="msg" rows="10" cols="20"></textarea>
<br />
<input type="button" id="send" onclick="send();"/>
<br>
<p id="demo"></p>
</body>
</html>
This is the XSS-Exploit (I write it in the <textarea>):
hello</p>
<script>alert("XSS");</script>
<p>
And this is the result (I show the <p id="demo"></p> part):
<p id="demo">
"hello"
<p></p>
<script>alert("XSS");</script>
<p></p>
</p>
And the command alert("XSS"); doesn't work. What did I do wrong?
Script tags only run on page load; when you dynamically inject them into the page, script tags aren't run. The common bypass to this is to use onerror or onload like <img src=x onerror='alert(1)'> or <svg onload='alert(1)'></svg>

It does not show me any output on console screen. What may be the problem

When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>

How to script a button click in a separate JS file rather than HTML Script Header tag

So I need some help, I am new to JS and I need to to find a solution to the problem I am having. I am trying to create a button when it clicks changes a piece of text. When I create a JS function in the script tag header and reference the function in the button onclick it works, but it doesn't work in a separate JS file. The HTML code is below. Hopefully, someone can help me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="changetext.js"></script>
<script>
function Button() {
document.getElementById("demo").innerHTML = "hello";
}
</script>
<script>
function Button2() {
document.getElementById("demo").innerHTML = "hi";
}
</script>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
this is an example...
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button()"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2()"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
first you need remove your script.. we include script only if you dont use a external js.
on your external js(changetext.js)
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
result:
if you dont use a external js the code is this:
<!DOCTYPE html>
<html>
<head>
<title>example</title>
</head>
<body>
<p id="demo"> hi</p>
<button id="ButtonText" onclick="Button();"> Click Here To Change The Text</button>
<button id="ButtonText2" onclick="Button2();"> Click Here To Change The Text Back</button>
<script type="text/javascript" src="changetext.js"></script>
</body>
</html>
<script>
function Button(){
document.getElementById("demo").innerHTML = "hello from button 1";
}
function Button2(){
document.getElementById("demo").innerHTML = "Hellow from button2";
}
</script>
we write the code js in the tag script good luck !!
Write your function in changetext.js and make sure that is in same place as your HTML file.
change onclick to onClick
and remove your script tags in the head

Tried to add innerhtml by tagname or by id but its didn't shown effect

I am trying to add innerHtml of element named as P.I had added its attribute id which has value p1. And i had tried to changes it innerhtml while onclick of a button.But overall i am failed to do so. And i still have no idea why its not doing so.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHtml="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHtml="this is my first page";
//console.log();
}
</script>
</body>
</html>
I am following this example which is showing results successfully.Please have an eye on it.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
I was using wrong syntax of javascript function which is named as innerHTML but i was using it as innerHtml.
<!DOCTYPE html>
<html>
<head>
<title>javascript </title>
</head>
<body>
<button onclick="myfunction()">click me</button>
<p id="new"> this my content added by manully</p>
<p id="p1"></p>
<script type="text/javascript">
document.getElementById("new").innerHTML="this is my first page";
function myfunction(){
//alert(1);
document.getElementById("p1").innerHTML="this is my first page";
//console.log();
}
</script>
</body>
</html>
try this :
<script>
$(document).on('click', '#new', function () {
$(this).html('my msg');
})
</script>

ckeditor update textarea from javascript

I have used CKEditor a year now and everything has worked as it should.
Now I need to change the text in the textarea using javascript.
I have created an example that illustrates my problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function othertext() {
document.getElementById('button').value = 'xxx';
document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
CKEDITOR.replace('editor');
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="othertext();" value="NewText" />
<br>
<textarea id=noteditor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
When I click the button, the value of the button changes, the same with the first textarea (id=noteditor).
But textarea (id=editor) is not affected.
Why?
In debugger, when the line "CKEDITOR.replace('editor1');" in function othertext is executed I get <exception>:TypeError.
What am I doing wrong?
I found a solution to my problem!
By chance I found the answer to my question here: http://sdk.ckeditor.com/samples/api.html under "Using CKEditor API".
I have rewritten my first code here below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function SetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor_Area1;
var value = document.getElementById('HTMLArea' ).value;
// Set editor content (replace current content).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="SetContents();" value="Set text" />
<br>
<textarea id=HTMLArea>
<h1>
Hello other world!
</h1>
<p>
I'm an other instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor_Area1>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor_Area1');
</script>
</body>
</html>
When clicking on the button, the content of the editor-area is replaced by the html from the textarea "HTMLArea".

Categories

Resources