I've multiple buttons with related text to each button, when user click on the button, the text should change according to button and text should be displayed in the DIV.
I'm using if elseif to choose between the text for each button, now I'm unable to go through the function to pass the text to the div onclick().
<html>
<head>
function display (selected) {
if (decision == firstbox) {
display = "the text related to first box should be displayed";
} else if (decision == secondbox) {
display = "Text related to 2nd box.";
} else {
display ="blank";
}
</head>
<body>
<input type="button" id="firstbox" value= "firstbox" onclick="display(firstbox)" /><br>
<input type="button" id="secondbox" value= "secondbox" onclick="display(firstbox)" /><br>
</body>
</html>
Pure javascript from your code:
function display (selected)
{
if (selected == 'firstbox')
{
texttoshow = "the text related to first box should be displayed";
}
else if (selected == 'secondbox')
{
texttoshow = "Text related to 2nd box.";
}
document.getElementById("thetext").innerHTML = texttoshow;
}
And the html:
<body>
<div id = "thetext"></div>
<button onclick = "display(firstbox)">Firstbox</button>
<button onclick = "display(secondbox)">Secondbox</button>
</body>
For what is worth it, in jQuery (a javascript framework):
$("#buttonclicked").
click(function(){
$("#yourdiv").
html("Your text");
});
This should do what you want
<button type="button" id="button-test">Text that will apear on div</button>
<div id="content">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#button-test').click(function(){
$('#content').text($(this).text());
});
});
</script>
http://remysharp.com/2007/04/12/jquerys-this-demystified/
http://api.jquery.com/text/
Here I am going to provide you to examples in one. One of them use div and the other don't, one using a link and the other using a button that need to be clicked.
<!DOCTYPE html>
<html>
<body>
<h2>Displaying text when clicked</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'These are the steps to get your PIN number: Bla bla bla'">
PIN button:</button>
<p id="demo"></p>
</br></br></br>
<a onclick="showText('text1')" href="javascript:void(0);">PIN link:</a>
<script language="JavaScript">
function showText(id)
{
document.getElementById(id).style.display = "block";
}
</script>
<div id="text1" style="display:none;">These are the steps to get your PIN number: Bla bla bla</div>
</body>
</html>
Related
i want to replace a div that is already displayed with another Hidden div with just one click. i don't want it to toggle. below is the code.
<html>
<script type="text/javascript">
function show(elementId) {
document.getElementById("surf").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
</html>
My desired output should be Display On Click when i click the button.
But right now i'm having both Display By Default and Display On Click showing when i click the button display by default at the top and Display On Click at button. i just want Display By Default to be replaced with Display On Click on same line.
<!DOCTYPE html>
<html>
<body>
<div id="div1" style="display:block">
<h2>first div</h2>
</div>
<div id="div2" style="display:none">
<h2>second div</h2>
</div>
<button onclick=show()>click here</button>
</body>
<script>
function show() {
let div1 = document.querySelector('#div1');
let div2 = document.querySelector('#div2');
if (div1.style.display == "block") {
div1.style.display = "none";
div2.style.display = "block";
} else {
div1.style.display = "block";
div2.style.display = "none";
}
}
</script>
</html>
onclick to hide div1 and show div2,
Next click hide div2 and show div1.
You are targeting the wrong element here document.getElementById("surf").style.display="none";. The "surf" should be "mode" instead. This worked for me
function show(elementId) {
document.getElementById("mode").style.display="none";
document.getElementById(elementId).style.display="block";
}
<div id="mode" style="display: visible;">Display By Default</div>
<div id="surf" style="display: none;">Display On Click</div>
<br/>
<button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>
i am trying to use JavaScript where i can click on a button and it will generate a button above it so for example i have the first button called add additional:
<a href"#"><button type="button">Add Additional</button></a>
When this button is clicked and it will generate another button where i want it to be displayed the below:
<td>
Name
</td>
<td>
<button type="button">Choose another thing</button>
</td>
and is it possible to repeat this process like generating more of the 2nd button "Choose Another thing"
i hope this ins't too confusing
I think you are looking for something like this!! Just add a script so that whenever you click on the button it will execute it and create more buttons.
<!DOCTYPE html>
<html>
<body>
<p>Click the "Add Additional" button to create a BUTTON element with a "Choose Another Thing" text.</p>
<button onclick="myFunction()" type="button">Add Additional</button>
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Choose another thing");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
</body>
</html>
I think this is the elegant way.
function appendButton(textContent, selector) {
var button = document.createElement('button');
button.classList.add('any');
button.innerHTML = textContent;
var selectedElement = document.querySelector(selector);
return selectedElement.appendChild(button);
}
// Call this function from wherever u like
// appendButton('click here', '.container');
<div class="container">
<button onclick="appendButton('click here', '.container')">
Click me
</button>
</div>
Run this you will get your solution
<html>
<head>
<script type="text/javascript">
function myFunction()
{
var a=document.createElement("a");
a.setAttribute("href","secondpage.html");
var btn=document.createElement("BUTTON");
var text=document.createTextNode("Choose another thing");
btn.appendChild(text);
a.appendChild(btn);
document.body.appendChild(a);
}
</script>
</head>
<body>
<a href"#"><button type="button" onclick="myFunction()">Add
Additional</button></a>
</body>
</html>
Give an id/class for a division append to it.
<div id='my_id' >
<td>Name</td>
<td><button>click</button></td>
</div>
When you click on addMore button write a function to append it to my_id
function onclickforaddbutton(){
id = document.getElementById('my_id');
var data = prompt("Enter something"); //where you can get data from user
id.innerHTML+="<td>"+data+"</td><td><button>Something</button></td>";
}
You need to first decide (container) where to add a new row. Then on click of add button, you can create a row with two columns, for the name and the new button, and append that row as a child of the container.
Here's how you can do it.
var count = 1;
var name = 'Generated Name';
function addNewRow() {
var container = document.getElementById('container');
var newRow = document.createElement('tr');
newRow.innerHTML = "<td>" + name + (count++) + "</td><td><button>Choose another thing</button></td>"
container.appendChild(newRow);
}
<html>
<head></head>
<body>
<div style="padding: 2rem;">
<table id="container">
</table>
</div>
<button onclick="addNewRow();">Add Additional</button>
</body>
</html>
What code would I need to embed a given text in the text area of a mail form by clicking on a button which is on another page of the same site? I've tried the following to no avail (where am I making the mistake?):
<button type="button" onclick="myFunction()">Submit request</button>
<p id="request"></p>
<script>
function myFunction() {
document.getElementById("request").textarea.kontakt.html = "My text.";
}
</script>
Use document.getElementById("id-of-the-textarea").value = "My text.";
Note : Your above code should be :
<button type="button" onclick="myFunction()">Submit request</button>
<p id="request"></p>
<script>
function myFunction() {
document.getElementById("request").innerHTML = "My text.";
}
</script>
I am trying to hide the div's when different buttons are clicked but I don't know how to. (So when 'Test 1' is clicked it should hide 'Test 2' Div and vice versa) I checked here and on Google but couldn't find an answer for it.
Javascript :
function showHide(divId) {
var theDiv = document.getElementById(divId);
if (theDiv.style.display == "none") {
theDiv.style.display = "";
} else {
theDiv.style.display = "none";
}
}
HTML :
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JSFIDDLE: is not doing it here but works locallyhttp://jsfiddle.net/S5JzK/
<input type="button" onclick="showHide('hidethis')" value="Test It" />
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
function showHide(divId) {
$("#"+divId).toggle();
}
Check the Fiddle http://jsfiddle.net/S5JzK/7/
Please try this, it works well and so simple,
<html>
<head>
<style>
.manageDiv{
display:none;
}
</style>
</head>
<body>
<input type="button" class="testButton" value="Test It" />
<input type="button" class="testButton" value="Test It 2" />
<div id="hidethis2" class="manageDiv">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
</body>
</html>
$(function(){
$(".testButton").on("click", function(){
$("#hidethis2").toggleClass("manageDiv");
});
});
To it work in fiddle, in your example, you need to select (No wrap - in head) on the left.
Look the example below, using pure javascript:
HTML
<input type="button" onclick="showHide('hidethis')" value="Test It">
<div id="hidethis" style="display:none">
<h1>TEST ME!</h1>
</div>
<input type="button" onclick="showHide('hidethis2')" value="Test It 2">
<div id="hidethis2" style="display:none">
<h1>TEST MEEEEEEEEEEEEEEE 2!</h1>
</div>
JAVASCRIPT
function showHide(divId) {
/* Hide all divs */
var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = "none";
}
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
http://jsfiddle.net/S5JzK/9/
ANOTHER JAVASCRIPT EXAMPLE
function showHide(divId) {
/* Hide the divs that you want */
var div1 = document.getElementById('#hidethis');
var div2 = document.getElementById('#hidethis2');
div1.style.display = "none";
div2.style.display = "none";
/* Set display */
var theDiv = document.getElementById(divId);
theDiv.style.display = "";
}
Using JQuery:
function showHideDiv(divId, bShow) {
if (bShow) {
$("#" + divId).show();
} else {
$("#" + divId).hide();
}
}
your code seems fine. are you sure you enter the function upon click? try adding a breakpoint using developer tools or an alert.
Anyways, I see you tagged this post with jquery. you can you it to do the task more elegantly.
$("#" + theDiv).hide();
or for showing it:
$("#" + theDiv).show();
"JSFIDDLE: is not doing it here but works locally"
Yes, because by default jsfiddle wraps your JS in an onload handler, which means the function declaration is local to that handler. Inline html attribute event handlers like your onclick="showHide('hidethis')" can only call global functions.
Under jsfiddle's Frameworks & Extensions heading there's a drop-down where you can change the default "onload" to "No wrap - in head" (or "No wrap - in body"). That'll make your function declaration global as in your local implementation.
Demo: http://jsfiddle.net/S5JzK/8/
How do I get the text beside my button to change? Everything else works fine except for these button messages. Thanks for your help.
<!DOCTYPE html PUBLIC "><head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
});
});
<!--NOT WORKING-->
$("button").click(function () {
$("h6").toggle();
});
</script>
</head>
<!--NOT WORKING-->
<h6>
<input type='button' value='+' id='PlusMinus'/>
Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>
BUTTON STATE 'Message should toggle between Larger Text and Smaller text'
[+] Larger Text
[-] Smaller Text
This worked for me:
<!DOCTYPE html PUBLIC "><html>
<head>
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
var fontSizes = [14, 16]
$(function(){
$('#PlusMinus').click(function() {
if($(this).val() == "+") {
$('#OurText').css('fontSize', fontSizes[1] + 'pt');
$(this).val("-");
}else {
$('#OurText').css('fontSize', fontSizes[0]+ 'pt');
$(this).val("+");
}
$("body h6").toggle();
});
});
</script>
</head>
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display: none">Smaller Text</h6>
<!--TEXT RESIZES-->
<p id="OurText">My Text!!!</p>
</body>
</html>
The changes I made were:
changed $("h6").toggle(); to $("body h6").toggle(); and moved it up to the $('#PlusMinus').click function
moved the button out of the "Larger Text" h6 element
added < html > tag at the top
removed "Not Working" comments ;)
instead of
$(this).val("-");
use
$(this).attr('value','+');
try
first correct the html
<input type='button' value='+' id='PlusMinus'/>
<h6>Larger Text</h6>
<h6 style="display:none" >Smaller Text</h6>
then jquery
$("input[type=button]").click(function () {
if($(this).val() == '-')
$(this).val("+");
else $(this).val("-");
$("h6").toggle();
});
});
see Demo
One problem is that you have:
$("button").click(function (){});
...but your HTML shows:
<input type="button" id="PlusMinus" />
You don't want to select a button element. You want an input element of type button. Try this:
$(':button').click( function(){} );
...assuming you're not going to select the button by its ID. Note that this could select more than one element, so the ID approach (or some other means of uniquely identifying the button you have in mind) would be preferable:
$('#PlusMinus').click( function(){} );