html button disappears after onclick() event - javascript

Hello guys I am New to javascript I want to know why does the html button disappears as soon as i click it. The browser shows the text but the button disappears. here is how my html looks likes
<html>
<head>
<script type="text/javascript">
function funcname(){
document.write("<br/> <br/> <br/> some text");
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>

The write() method writes HTML expressions or JavaScript code to a document.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Answer from: source

<html>
<head>
<script type="text/javascript">
function funcname()
{
document.body.innerHTML += "Some Text";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
Try above code it will work fine.If you use document.write() overwritten body so should be use document.body.innerHTML .

The Document.write function overwrites the document content when called, as stated by the Mozilla Developer Network:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/write

document.write() will override your whole body element. If you want to override only specific parts, you could define a target and use innerHTML to change the text.
<html>
<head>
<script type="text/javascript">
function funcname(){
document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
<p id="someParagraph">Hey<p>
</body>
</html>

Related

Val(" ") Not Removing Text From Text Box

In my HTML file, I have code which takes input in a text box and then displays it on the page without re-loading the page. I am using JQuery to do this. However, the line in the code which is supposed to remove the text from the text box is not working. Please see below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("input.submit").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
Text from "" is taken to the placetextfromboxes function and put in the variable "textFrombox". However, the line "$("input.submit").val("");" is supposed to erase the text from the box but it is not being erased. Is there anything that I am missing?
As per azro's suggestion in the comments, changing $("input.submit") to $("#yg") produces the effect you're looking for.
For convenience, the correction is offered in the snippet below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/styleblock.css">
<script type=text/javascript src="{{url_for('static', filename='jquery.js')}}">
</script>
<script type="text/javascript">
function placetextfromboxes() {
event.preventDefault();
var textFrombox = $("#yg").val();
$("#yg").val("");
$("#word").html(textFrombox)
}
</script>
</head>
<body>
<form action="/" method="post">
<p>Name:</p>
<textarea id="yg" name="nm"></textarea>
<p><input type="submit" value="Submit:" onclick="placetextfromboxes(event);" /></p>
<p id="word"></p>
</form>
</body>
</html>
It appeared to me as though $("input.submit") had been intended to select the submit button.
Changing the value to $("input") or $("input[type=submit]") successfully selected it but, as you may guess, it simply erased the text in the button when clicked.
Changing to $("#yg").val(""), successfully erases the text in the textarea and does not affect the value stored in the textFrombox variable.
input.submit would target an input element with class submit. What you have instead is attribute type of value submit. Therefore, to select this you'd need to do input[type=submit].
But it looks like you just want $('#yg').val('').

javascript onclick function call passing form name without quotes results

<html>
<head>
<script>
function calledHere(value) { console.log(value); }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
From the above code, in the onclick call passed wrongly the form name without quotes. But, the output displays the whole form DOM element. Don't know how it got the form element.
Any help will be more useful for my learning on javascript side.
Thanks in Advance!!!
You've already got the form element in your 'value' variable. The reason you're seeing the element's html logged is because console.log calls the .toString() method on the element.
This code demonstrates that 'value' references the form element:
<html>
<head>
<script>
function calledHere(value) { value.style.backgroundColor = "red" }
</script>
</head>
<body>
<form name="test">
<input type="button" value="click!" onclick="calledHere(test);" >
</form>
</body>
</html>
http://jsfiddle.net/John_C/KZ3KR/
This answer explains the scope of the variable; why you can pass the form name to the function: https://stackoverflow.com/a/1416157/1588990

Unable to run script - DOM based attack

I am trying to create a DOM based attack using a html file.
The file is as follows :
<html>
<head>
<script type="text/javascript">
function fun() {
var val = document.getElementById("mytext").value;
document.getElementById("p1").innerHTML = unescape(val);
}
</script>
</head>
<body>
<p id ="p1">Empty</p>
Give input : <input id="mytext" type="text" value="abcd" >
<input type="button" id="b1" onclick="fun()" value="Change link" >
</body>
</html>
When I pass <script>alert('hello world');</script> inside the text box and click on the button the p tag doesn't run the script. What might be the possible reason? I am learning XSS for testing our website for security.
Try inserting instead. Scripts do not run when inserted into innerHTML.

Select text box on page load jQuery

I have the following code which uses JavaScript to select a text box when the page loads. I have included a copy of my code below. My question is how can this be done in jQuery?
<!doctype html>
<html>
<head>
</head>
<body>
<input id="query">
<script type="text/javascript">
function box(query){
document.getElementById('query').focus();
}
box('query');
</script>
</body>
</html>
Thanks in advance, Callum
You also can use HTML5:
<input type="text" autofocus>
Reference: http://www.w3schools.com/html5/att_button_autofocus.asp
Cross Browser Compatibility: http://caniuse.com/#feat=autofocus
$(document).ready(function(){
$('#query').focus()
});

Display javascript value within HTML body

i have the following relevant code in the header of my html doc:
test1.value = System.Gadget.Settings.read("Date1");
And I'm trying to display the test1 value in the body of my html doc.
It displays when i use:
<input type="text" id="test1" />
But isn't working when i use (in the body):
<script type="text/javascript">
document.write(document.getElementById('test1').id);
</script>
Any suggestions would be greatly appreciated
This might be obvious, but why not just write:
<html>
<body>
<div>Here's the Date1 value:
<script type="text/javascript">
document.write(System.Gadget.Settings.read("Date1"));
</script>
</div>
</body>
</html>
If this does not do what you want, please explain what your expected output is.
That doesn't work because your script is in the header of your page and the declaration os the input text1 is in the body .. so what happends is that when the browser runs the script it won't find the object.
You will need something like this ...
<html>
<body>
<input type="text" id="test1" />
<script type="text/javascript">
document.write(document.getElementById('test1').id);
</script>
</body>
</html>

Categories