<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" >
function changeTitle() {
if (document.getElementById('myText').value === "") {
document.getElementById('title').innerHTML = "Welcome to JavaScript";
alert("Enter a valid text title");
return;
} else {
document.getElementById('title').innerHTML = document.getElementById('myText').value;
}
}
</script>
</head>
<body>
<h1 id="title">Welcome to JavaScript</h1>
<p> Hello! This is my first JavaScript example on Microsoft Visual Studio Express Edition 2013.</p>
<p>
<input id="myText" type="text"/>
<input type="submit" onclick="changeTitle();" value="Click me!"/>
</p>
</body>
</html>
In this little example, I want to save the initial innerHTML of the h1 tag (id=title) to a variable after loading the page for the first time.
And then instead of the document.getElementById('title').innerHTML = 'Welcome to JavaScript' which is inside the if statement, I want to substitute that above mentioned variable with the phrase "Welcome to JavaScript".
My main intention is,
wwhenever some one leaves the textbox (id=myText) blank and click on the submit button, script should replace the innerHTML of the h1 tag (id=title) to the initial value that was there in the first page load and pop out that alert box. (Maybe user has changed the innerHTML of the h1 before, but the script should replace it to the initial value that was there in the first page load).
You can declare a hidden input.
<input type="hidden" id="initialTitle" value=""/>
and populate the hidden field value via body onload JS function like.
function setInitialTitle() { document.getElementById('initialTitle').value = document.getElementById('title').innerHTML }
<body onload="setInitialTitle()";>
And in changeTitle() function rewrite if block as.
document.getElementById('title').innerHTML = document.getElementById('initialTitle').value;
Just use onload="changeTitle()"
here is a demo: http://jsfiddle.net/nn007/cKk4U/1/
Try this instead of your body tag....
<body onload="changeTitle();">
Related
I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>
I have some text boxes in html which takes value from database based upon that value i want to hide that particular text box i.e if the value is null the text box disappear please help.Searched a lot but still confused as i want that function to run automatically so can't use on-click or on-change method. I have function that check for the value weather that value is null or not then i set that value to the text box. Found a method of changing the type of text box but not working.
readonly>
Hide
You could just do this. Im just setting the visibility to hidden to completely hide it.
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="myFunction()">Hide content of textarea</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "hidden";
}
</script>
</body>
</html>
Toggle
Now if you want to toggle you just add another function!
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="hide()">Hide content of textarea</button>
<button type="button" onclick="show()">Show content of textarea</button>
<script>
function hide() {
document.getElementById("myP").style.visibility = "hidden"
}
function show() {
document.getElementById("myP").style.visibility = "visible"
}
</script>
</body>
</html>
Ok, so i am quite new to JavaScript, and may not know what i am doing wrong, so i need help correcting any mistakes i've made. My aim to to make a title, and a sentence with 2 buttons. One button is supposed to change the text of the sentence, and the other to change the text of the title.
Here's my thoughts: I named the functions title and sentence (If i did it right) so when i click the button that is said to execute that command on click, it does. (obviously) So like onclick="title()" I mean when you click that button, it runs the code that would change the title, and vice versa for the sentence. All i end up getting when i open it is 2 buttons, a sentence, and a title. I click the buttons, nothing happens. So my question is; How do i make 2 buttons that change 2 different entities. One to change title, one to change the sentence. Thank you!
<!DOCTYPE html>
<html>
<head>
<script>
function Title() {
document.getElementById=("demo").innerHTML = "Title Changed"
}
function Sentence() {
document.getElementById=("demo").innerHTML = "Sentence Changed"
}
</script>
</head>
<body>
<h1 id="demo">The Title</h1>
<p1 id="demo">The Sentence</p1>
<button type="button" onclick="Title()">Title Button</button>
<button type="button" onclick="Sentence()">Sentence Button</button>
</body>
</html>
ID's should be unique (use different ID's for title and sentence).
document.getElementById=("demo") is just wrong syntax... There should be no assignment operator in between.
There's no such tag as p1.
function Title() {
document.getElementById("title").innerHTML = "Title Changed";
}
function Sentence() {
document.getElementById("sentence").innerHTML = "Sentence Changed";
}
<h1 id="title">The Title</h1>
<p id="sentence">The Sentence</p>
<button type="button" onclick="Title()">Title Button</button>
<button type="button" onclick="Sentence()">Sentence Button</button>
Your code is most of the way there, but you need to understand that in HTML the id attribute is like a street address: it does not make sense to give two different buildings the exact same address. So the value of every id attribute on a page should be unique.
Also, there is no such tag as p1 in HTML5, so you should change this to the standard paragraph element p.
Finally, getElementById is a function call, so there is no = between the function name and its argument ("title") so the equals sign needs to be removed.
Combined, your code should look like this:
<h1 id="title">The Title</h1>
<p id="sentence">The Sentence</p>
and this:
function Title() {
document.getElementById("title").innerHTML = "Title Changed";
}
function Sentence() {
document.getElementById("sentence").innerHTML = "Sentence Changed";
}
Your JavaScript should then be targeting the correct elements and you should see the content change when each button is pressed.
ID should be unique on html page. Code corrected as per your need:
<!DOCTYPE html>
<html>
<head>
<script>
function Title() {
document.getElementById("demo").innerHTML = "Title Changed";
}
function Sentence() {
document.getElementById("sentence").innerHTML = "Sentence Changed";
}
</script>
</head>
<body>
<h1 id="demo">The Title</h1>
<p1 id="sentence">The Sentence</p1>
<button type="button" onclick="Title()">Title Button</button>
<button type="button" onclick="Sentence()">Sentence Button</button>
</body>
</html>
How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post
This code is meant to display items items as a list in the div above the button but, although the button and prompt work, there is no text displayed in the div. Help!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Shopping List</title>
<style>
#button {
width:80px;
height:30px;
}
div.ex {
width:500;
height:500;
}
</style>
<script>
function a() {
var thing = prompt('Insert an item or press cancel');
if (thing != null && thing != undefined) {
document.getElementById('b') += thing;
}
else {
}
}
</script>
</head>
<body>
<div class='ex' style="color:#007AFC"></div>
<button onclick='a()' id='button'>Add Item</button>
</body>
</html>
First of all, you are using document.getElementById('b') however you don't have an HTML element with id="b". Secondly, you can't change the HTML content of an element using only the += operator. You need to modify the innerHTML attribute like so:
document.getElementById('b').innerHTML += thing;
Also, you need to have an HTML element with id="b" like so:
<div id="b" class='ex' style="color:#007AFC"></div>
However, consider using a more descriptive name for the id.
Can you really add text with "+="!? I would try it using append()
And what sushain97 says: add a id to the element (id="b"). But if you want to add more items one after the other you need to use append(), not innerHTML(), because innerHTML() will replace all of the content.
html :
<div class='ex' style="color:#007AFC" id="b"></div>
js:
document.getElementById('b').innerHTML+=thing;
I have a fiddle that shows it working. The relevant javascript is as follows:
document.getElementById('addButton').addEventListener("click", addListItem, false);
function addListItem(){
var thing=prompt('Insert an item or press cancel') + "<br />";
if(thing!=null&&thing!=undefined){
document.getElementById('listDiv').innerHTML += thing;
}
}
Side note: Try to stay away from inline styles and scripting. It makes it more difficult to maintain.