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
Related
I'm quite new to all this but I learned quite quickly, as it's really easy in my opinion. I'm trying to make a button hide a <p> tag that another button spawned. How can make the button (At the bottom of code) make the <p> tag disappear?
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
You have to define the called function and using display:none hide the paragraph
function myFuction() {
document.getElementById('date_button').style.display = 'none'
}
<button type="button" onclick="document.getElementById('date_button').innerHTML = Date();document.getElementById('date_button').style.display='block'">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFuction()">Click this to hide date.</button>
In your case you want to show it again so you need to set its innerHTML to ''. In your case if you will do style.display = 'none'. It will not show <p> again
function myFunction(){
document.getElementById('date_button').innerHTML = '';
}
<button type="button"
onclick="document.getElementById('date_button').innerHTML = Date()">
Click this button to display the current time!</button><br>
<p id="date_button"></p><br><br>
<button onclick="myFunction()">Click this to hide date.</button>
Try this. I think this can help
function myFuction() {
document.getElementById('date_button').style.display = 'none';
}
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>
In JavaScript - If I want to fire a button I do this -
<button type = 'button' id='myButton'>HiddenButton</button>
<script>
function callAutoClick(){
document.getElementById('myButton').click();
}
</script>
When I want to fire this button click, say, onChange of a text field -
<input type= 'text' onchange ='callAutoClick()'/>
I am not able to do the same in DOJO. I have found a solution using Javascript -
var divId = document.getElementById('myDivID');
divId.getElementsByTagName("button")[0].click();
But I don't want to have the dependency with the DivID. Is it possible to click a button just knowing the button's controlID. All I could find online were methods to define an OnClick() using dojo for a button and not clicking the button itself.
Plus I am designing the page with a BPM Tool so on including sections the DivID changes. When I open the page in FireBug I can see this -
<div id="div_1_1_2_1" class="Button CoachView CoachView_invisible CoachView_show" data-ibmbpm-layoutpreview="vertical" data-eventid="boundaryEvent_2" data-viewid="Hidden_Cancel" data-config="config23" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_2d5b8abc_ade1_4b8c_a9aa_dfc746e757d8.Button">
<button class="BPMButton BPMButtonBorder" type="button">Hidden_Cancel</button>
</div>
If you guys could suggest me a way to access the DOM object using the data-viewId also it would cater to my need.
Thanks in advance :)
You can use dojo/query:
function progClick() {
require(["dojo/query"], function(query) {
query("div[data-viewid=myViewId] > button").forEach(function(node) {
node.click();
});
});
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<div id="everChangingId" data-viewid="myViewId">
<button type="button" onclick="alert('my button got clicked!')">My Button</button>
</div>
<hr/>
<button type="button" onclick="progClick()">Programatically Click My button</button>
</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>
<html>
<head>
<title></title>
</head>
<body>
<button id="btn_id">CLICK THE BUTTON</button> RESULTS:
<div id="result"></div>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript">
$("#btn_id").click(function () {
$("#result").append("<button type='button' id='btn_id2' class='close pull-right' aria- hidden='true'>×<\/button>" + "<pre class='one'>Sample text<\/pre>");
$("#btn_id").click(function () {
$("#btn_id").remove();
$(".one").empty();
});
});
</script>
</body>
</html>
I'm having a problem on the above code. I'm trying to append text with a button on it. The button will be the one to trigger to remove the appended text. But what happening is I can't remove the appended text one by one. The first appended text with the button has only the capability to remove all the appended text. But what I wanted to happen is that, it should be one at a time even though that I clicked the "CLICK THE BUTTON" a number of times.
What I needed is the "CLICK THE BUTTON" to be clicked a number of times and it will produced an appended text with a close button on it. The close button will be the one to remove the appended text, only for that specific text.
Are you looking for something like this?
jsfiddle
JavaScript:
$("#btn_id").on('click', function(){
$("#result").append("<div><button type='button' id='btn_id' class='close pull-right' aria-hidden='true'>×</button>"+"<pre>Sample text</pre></div>");
});
$(document).on('click', 'button.close', function(){
$(this).parent().remove();
});
HTML:
<button id="btn_id">CLICK THE BUTTON</button>
RESULTS: <div id="result"></div>