How do I get rid of the button onclick="clickMe()" and just have the input from the prompt box execute the function?
I need the input from a prompt box to invoke the if statement, i think?
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script>
function clickMe(){
var valueInput=prompt("Please input weekday, weekend?");
var weekdayElement = document.getElementById("weekday");
var weekendElement = document.getElementById("weekend");
if (valueInput=="weekday"){
weekdayElement.style.height = "200px";
weekdayElement.style.width = "250px";
weekdayElement.style.fontSize = "15px";
weekdayElement.style.color="blue";
if (valueInput=="weekend"){
weekendElement.style.height = "200px";
weekendElement.style.width = "250px";
weekendElement.style.fontSize = "15px";
weekendElement.style.color="blue";
}
</script>
</head>
<body>
<h1>This is an example on DOM</h1>
<div id="weekday">
weekdays
<p>Monday</p>
<p>Tuesday</p>
<p>Wednesday</p>
<p>Thursday</p>
<p>Friday</p>
</div>
<div id="weekend">
weekends
<p>Saturday</p>
<p>Sunday</p>
</div>
<p><button onclick="clickMe()">Try it</button></p>
</body>
</html>
If I understand correctly, you want the prompt to jump when the page is loaded, and then execute the code in "clickMe" (without the prompt) once the user has input a value?
In that case, you need to run the prompt after the page has loaded. You can see an example here:
http://jsfiddle.net/7a6e9r2f/1/
Note that jsfiddle automatically calls the javascript code at the bottom after the page has been loaded. In your case, you need to add
<body onload="onLoaded()">
to your html so that the onLoaded function is called.
Related
I am not able to get the value of input statement in my JavaScript function, as i want my output on my canvas section of html but it is not showing anything on my canvas as well as in console.log function also. please help to solve this problem. thanks :)
var x = document.getElementById("name").value;
console.log(x);
function myfunction() {
var canvas = document.getElementById('page');
var ctx = canvas.getContext("2d");
ctx.font = "15px Arial";
ctx.fillText(x, 10, 50);
}
<!DOCTYPE html>
<html>
<head>
<title>yoyo</title>
</head>
<body>
<p>hi everyone!</p>
<div>
<label>Your text here-</label><br>
<input type="text" name="name" id="name">
</div>
<div>
<canvas id="page" width="200" height="300" style="border: solid; background: yellow;"></canvas>
<button onclick="myfunction()">click</button>
</div>
</body>
</html>
The code below will get your input logged in the console.
You need to have the console log inside of your myFunction function, so that the value of the input is only printed to console/checked once the user clicks the 'click' button. You should not create a variable requiring user input, and immediately try to access its value, because when the program is loaded the user has not input any value into the input yet. So below, your x variable is created by accessing the #id, the user fills in the input field, clicks the button, then the value of the x variable is checked, and printed to the console.
var x = document.getElementById("name");
function myfunction() {
console.log(x.value);
};
So I am running some tests with JS and HTML right now, and one of the things I am doing is appending text to the page with JS every time the button is pressed. How do I keep the html the same after reloading the page? Is there a way to save it's current state so the added text doesn't go away? I'm sorry if this was answered before, I couldn't find any answers on this, nor do I know if it's possible. Thanks in advance!
<!DOCTYPE HTML> <HTML>
<HEADER>
<link rel="stylesheet" type="text/css" href="indexcss.css">
<center>
<b>
<TITLE> </TITLE>
<div id='parentID'>
</div>
<script>
prompt("prompting");
var button = document.createElement("button");
button.innerHTML = "Do Something";
// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
// 3. Add event handler
button.addEventListener ("click", function() {
var div = document.getElementById('parentID');
div.innerHTML += 'Extra stuff';
});
</script>
<h1>
</h1>
</b>
</center>
</HEADER>
<BODY>
</BODY>
use localStorage
set()
document.body.innerHTML += Math.random()
save()
function save() {
localStorage.setItem("html", document.body.innerHTML)
}
function set() {
let content = localStorage.getItem("html")
if(content) {
document.body.innerHTML = content
}
}
<body>
hi
</body>
In a.html:
I have a textarea that is converted into a link after the user clicks the submit button. When the user clicks on the link they are redirected to b.html.
<textarea id="sentenceId">
</textarea>
<br>
<button type="button" id="buttonId" onclick="createLink(document.getElementById('sentenceId').value)">Submit
</button>
<p id="demo">
<a id ="link" href="b.html"></a>
</p>
In b.html:
I would like to display the original text.
In script.js:
function createLink(val) {
document.getElementById("link").innerHTML = val;
document.getElementById('buttonId').style.display = 'none';
document.getElementById('sentenceId').style.display = 'none';
}
If you want to open a new page and get the text there, you could use a post-form and an input[type="hidden"] to send the text and display it afterwards.
If you wand the link to be sendable, you'd either have to encode the text as get-parameter or save it to a database and add the id of the entry to the link.
As #Kramb already mentioned, localStorage is a possibility, but only if you stay on the same browser and both pages have the same domain.
Using localStorage
The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the browsing session ends—that is, when the browser is closed.
a.html
function createLink(val) {
document.getElementById("link").innerHTML = val;
document.getElementById('buttonId').style.display = 'none';
document.getElementById('sentenceId').style.display = 'none';
localStorage.setItem("textArea", val);
}
b.html
function getText(){
var textVal = localStorage.getItem("textArea");
}
Another option would be to use a query string.
a.html
function navigateTo(val){
window.href.location = "b.html?text=" + val;
}
This will pass the value of the text from textarea with the url during navigation. Once b.html has loaded, you can do the following.
b.html
function getText(){
var url = window.location.href;
var queryIndex = url.indexOf("=") + 1;
var passedText = url.substring(queryIndex);
document.getElementById('foo').value = passedText;
}
This is possible using JavaScript. You can do an AJAX call to another page on you website, and search for an element to get its content. In you're case an textarea
I wrote an example on codepen.io for you. Click here
To make things simpler im using jQuery in this example.
So how does it work?
First of, include jQuery inside the <head> tag of you're website.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I created the following structure
structure
root
scripts
jQuery.min.js
index.js
index.html
textarea.html
Contents of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<button id="clickme">To load the textarea content, click me!</button>
<div id="content">The data from the textarea will be shown here, afte you click on the button :)</div>
<!-- Scripts -->
<script src="scripts/index.js"></script>
</body>
</html>
Contents of texarea.html
<textarea id="textarea">
I am the content of the textarea inside the textarea.html file.
</textarea>
Contents of index.js
(function() {
$(document).ready(function() {
/**
* The button which triggers the ajax call
*/
var button = $("#clickme");
/**
* Register the click event
*/
button.click(function() {
$.ajax({
url: "textarea.html",
type: "GET"
}).done(function(response) {
var text = $(response).filter("#textarea").html();
$("#content").append("<br/><br/><strong>" + text + "</strong>");
});
});
});
})()
So what does index.js do exactly?
As you can see i created an Ajax call to the textarea.html file. The .done function holds the response data. The data inside it can be anything depending on the content of the textarea.html file.
$(response).filter("#textarea").html();
The above piece of code filters out the #textarea div and then gets the innerHTML using the jQuery html() function.
If you want to get the value of the textarea through the [value] attribute, you can replace above line to
$(response).filter("#textarea").val();
I believe you want to do this:
function createLink() {
var textvalue = document.getElementById('sentenceId').value;
document.getElementById("link").innerHTML = textvalue;
document.getElementById("buttonId").className ="hideme";
document.getElementById("sentenceId").className ="hideme";
}
.hideme{
display: none;
}
<textarea id="sentenceId">
</textarea>
<br>
<button id="buttonId" onclick="createLink()">Submit
</button>
<p id="demo">
<a id ="link" href="b.html"/>
</p>
I'm new to programming and would need some help, why the document.write() didn't work and basically the page crashes... Can anyone help me?
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function showText() {
var x;
var counter;
if ( x === 0) {
counter = 0;
x = 1;
}
counter = counter + 1;
document.write("Times clicked: " + counter);
}
</script>
<body>
<script type="text/javascript">
showText();
</script>
<button onclick="showText();">Click Me!<button>
</body>
</html>
Avoid using document.write
Quoting from the MDN Developer Network documentation page:
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.
So basically, your issue is using document.write after the page has loaded: this will result in deleting the entire content of the page and displaying that string.
Also, your code doesn't work because your count variable is declared inside the showText function, and you're trying to access it outside of it, running into an error.
Solution
To make your code work you should create another element, let's say a <p> element, and display the text inside of it. Here's an example of a correct page:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn">Click me!</button>
<p id="txt">Times clicked: 0</p>
<script type="text/javascript">
function showText() {
count++;
text.textContent = "Times clicked: " + count;
}
var count = 0,
button = document.getElementById("btn"),
text = document.getElementById("txt");
button.addEventListener("click", showText);
</script>
</body>
</html>
Check out a live demo here.
I have written the following code to display an input with Javascript's alert( ... ) function.
My aim is to take a URL as input and open it in a new window. I concatenate it with 'http://' and then execute window.open().
However, I just get 'http://' in the URL name, even after concatenation, and not the complete URL. How can I fix this?
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<body onload="onload();">
<input type="text" name="enter" value="" id="url_id">
<input type="button" value="Submit" onclick="func();">
</body>
<script type="text/javascript">
var url;
function onload() {
url = document.getElementById("url_id").value;
}
function func(){
var var1 = "http://";
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
</script>
</head>
</html>
You shouldn't be calling it in onload(), only after the user has entered the url into the input field. Of course its an empty string, because you assign url to the value of #url_id before the user has a chance to enter anything when you place it in onload().
function func(){
var var1 = "http://";
url = document.getElementById("url_id").value;
var var2 = url;
var res = var1.concat(var2);
alert(var2);
//window.open(res);
}
Others have given solutions, and you already have accepted one. But none of them have told you what is wrong with your code.
Fristly, you have a body element inside your head element. This is invalid markup. Please correct it:
<html>
<head>
<!-- this is a script -->
<script type="text/javascript">
// javascript code
</script>
</head>
<body>
<!-- this is an inline script -->
<script type="text/javascript">
// javascript code
</script>
</body>
</html>
Secondly, you need to have an idea about the execution order of JavaScript inside browser windows. Consider this example:
<html>
<body onload="alert('onload')">
<p>Lorem Ipsum</p>
<script type="text/javascript" >
alert('inline');
</script>
</body>
</html>
Which alert do you thing will get executed first? See the JSFiddle.
So as you can see, inline JavaScript will be executed first, and then the browser will call whatever code is in <body onload=.
Also, onload function is called immediately after the page is loaded. And user has not entered anything when the function is executed. That is why you get null for url.
function func()
var url = document.getElementById("url_id").value;
var fullUrl = "http://".concat(url);
alert(fullUrl);
// or window.open(fullUrl);
}
You're not concatenating with a String but with an Object. Specifically an HTMLInputElement object.
If you want the url from the text input, you need to concatenate with url.value.
if its not concatenating, use:
var res = val1+val2.value;