Is there any way to clear the page with javascript? - javascript

I have a page I made, and I want to clear the page when I click a button.
My page looks like this:
<html>
<head>
<script language="Javascript">
function myFunction() {
}
</script>
</head>
<body>
Hello World!<br>
<input type="button" value="clear" onclick="myFunction()">
</body>
</html>
Is there any way to clear?

Inside of your function, you can set the body's text to be blank with document.body.innerHTML= ''.
See https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

Related

Cannot push value to second output field

I just finished the W3 Schools certification course on JavaScript.
Can somebody explain why the returnValue() function works for the inField element, but not for the output element.
I'm guessing I have to create a variable and then reference the variable with the output element. Even if that is the solution I'd like to understand the logic behind this necessity.
Any assistance is appreciated.
HTML
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id='output'>Output: </div>
<div> Enter a value: <input type="text" id="inField"> </div>
<button onclick="returnValue()" id="submit">Submit</button>
</body>
</html>
JavaScript
function returnValue() {
document.getElementById("inField").value="Test";
document.getElementById("output").value="Test";
}

Passing timestamp to a form on button click

Very new to Javascript. I would like to pass a timestamp to a form when the user clicks a button, but I'm having trouble with getting the actual value to submit.
<html>
<head>
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
});
});
</script>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show" onclick="userdate = new Date()">Show text</button></p>
<div id="ans" style="display:none">
<input type="hidden" id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
</body>
I've omitted the form submission code - unfortunately I did not write it and I don't have access to the code beyond using it for form submission.
But upon submission, the .csv file contains:
"timestamp":"dateOfUser"
And not the value of "userdate". As far as I understand, using document.getElementById("userdate").value = dateOfUser; should allow me to use "userdate" in the HTML.
Any help would be appreciated, I've poured over many similar questions on this site and others, but I am having trouble figuring out what I'm doing wrong.
you can remove the type="hidden" to test. At least it works for me using userdate.value.
<html>
<head>
</head>
<body>
<p>
Click the button to see the text.
</p>
<p><button type="button" id="show">Show text</button></p>
<div id="ans" style="display:none">
<input id="userdate" name="timestamp" value="dateOfUser">
Here is the hidden text.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
// hide the content from user until they click the button
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#ans").show();
$("#userdate")[0].value = new Date()
});
});
</script>
</body>
The way you put script above the body
<script type="text/javascript">
var dateOfUser = new Date();
document.getElementById("userdate").value = dateOfUser;
</script>
wouldn't work because the dom(i.e. the elements) has not loaded. While onclick and $(document).ready are different from the above way.
However, it's still better for you to put script at the bottom of body.

How to call grab the value of a button inside the iframe using jquery?

I have 2 html pages (a.html and b.html). I have made an <iframe> and set b.html as a source of a.html. But how do I call at a.html to grab the value of b.html button using jquery via class name? FYI: Both are in the same domain. How can I achieve that?
a.html
<html>
<head>
<title>a.html</title>
<script>
function howToGetValueOfBtn() {
}
</script>
</head>
<body>
<iframe src="b.html"></iframe>
</body>
</html>
b.html
<html>
<body>
<input type="button" value="getThisValue" class="btn"/>
</body>
</html>
Thanks for all the helps in advance!
Try this:
var button_value = $('iframe').contents().find('.btn').val();
But it would be best if you give your button an Id
var button_value = $('iframe').contents().find('#btn_Value').val();
<input type="button" value="getThisValue" class="btn" id="btn_Value"/>
Hope this helps

simple javascript example not working

I am learning javascript and i can't manage to make this work, an alert message should appear when i click the submit button
Html
<html>
<head>
<title>Understanding the Document Object Model</title>
<script type="javascript" src="script.js"></script>
</head>
<body>
<h1 id="title">Understanding the Document Object Model</h1>
<p id="first">This is the first paragraph</p>
<p id="second"><strong>This is the second paragraph</strong></p>
<p id="third">Third paragraph</p>
<input type="submit" id="clickMe" value="Click Me"/>
</body>
</html>
Javascript script.js
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
Your type attribute is wrong.
It should be "text/javascript"
It works fine for me after making that change
==================================
EDIT:
As a note, my debugging process was to try invoking the alert() directly in the script. script.js became:
alert("running the example");
window.onload=function(){
document.getElementById("clickMe").onclick=runTheExample;
}
function runTheExample(){
alert("running the example");
}
That was triggering the alert either, which says that the whole script isn't in play. So it must be the invocation of the script that's the problem.
Once you've determined that, there aren't many things left to check.
<script type="text/javascript" src="script.js"></script>
You change your external javascript file link like this. Because,type attribute of script tag should come as text/javascript

DOM element doesn't display

I am new in Javascript and I am trying to test following code
<html>
<head>
<script src="jquery/jquery.min.js">
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input')[0].on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
but when i open this html file in browser the button doesn't display
Script tags require a closing tag, which you've omitted:
<script src="jquery/jquery.min.js"></script>
^ close
By leaving it open, the browser is treating everything after the script tag as the script content.
Also your $('input')[0] isn't right. That is getting the DOM element of the input, which has no jQuery wrapper and no .on() function. If you are trying to match just the first input then:
$('input').first().on('click',function(){
Problems
Script block must be closed which you missed.
Use $('input') instead of $('input')[0], When you use $('input')[0] you get DOM element which doesn't have click method.
Use
<html>
<head>
<script src="jquery/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click button">
<script type="text/javascript">
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
</script>
</body>
</html>
To avoid these kind of confusions, try to separate like below,
In HTML:
<html>
<head>
<script src="jquery/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<input type="button" value="Click button">
</body>
</html>
In main.js
$(function(){
$('input').on('click',function(){
alert('button clicked');
});
});
For Demo
Adding the <!DOCTYPE html> is better when you continue developing.

Categories

Resources