I have a page where I would like two buttons which when one is clicked, displays hello, and when the other one is clicked would hide the "hello" message and then display "goodbye". I know this needs to be done in javascript but I am not good with javascript.
Check this snippet
<p id="msg"></p>
<button onclick="helloFunction()">Say Hello</button>
<button onclick="byeFunction()">Wave Goodbye</button>
<script>
function helloFunction() {
document.getElementById("msg").innerHTML = "Hello";
}
function byeFunction() {
document.getElementById("msg").innerHTML = "Goodbye";
}
</script>
There are a couple of ways to do it, one of which would be affecting the visiblity of dom elements which say hello or goodbye, the other method as illustrated below you would actually change the text of a dom object based on which button is pressed
<button onClick="javascript:say('Hello');">Say Hi</button>
<button onClick="javascript:say('Goodbye');">Say Goodbye</button>
<div id="TextField"></div>
<script>
function say(text) {
var element = document.getElementById("TextField");
element.innerHTML = text;
}
</script>
here what you'll need to achieve such a feat.
first create a div or a p tag to hold ur text and two buttons
eg
<div id="container">Hello</div>
<button id="show">Show</button>
<button id="hide">Show</button>
make sure your div has an id and you buttons too. You use that for reference.
then in your javascript, you can either toggle the display or visibility of the div
<script type="text/javascript">
//Declare variable
var div = document.getElementById("container");
var show = document.getElementById("show");
var hide = document.getElementById("hide");
//run when windows fully loads
window.onload = function(){
//when i click show button
show.onclick = function(){
div.style.display = "block";
}
//when i click hide button
hide.onclick = function(){
div.style.display = "none";
}
}
//That is champ, this is all vanilla javascript. You can also look into implementing with jquery.
</script>
Related
I have a button when user clicks the button it create the text box along with remove button
but all the text boxes created with same id how we can delete the text box when clicks respective remove button
here My Code:
<body>
<button type="button" id="URLbtn" onclick="Createinput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
<script>
function Createinput() {
var newdiv=document.createElement("div");
newdiv.id="test"
var Inputele=document.createElement("input");
Inputele.type="text";
Inputele.id="URLtxt"
newdiv.appendChild(btnele);
var btnele=document.createElement("button");
btnele.id="rmvbtn"
btnele.type="button"
btnele.innerHTML="-"
btnele.onclick=RemoveUrlBox()
newdiv.appendChild(btnele);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newdiv);
}
function RemoveUrlBox() {}
</script>
</body>
i am getting following output
if user click 2 remove button only remove the second textbox and button
You need to select the wrapping div. Easiest way is to use remove() and use closest. No need to use the id..... You also need to remember ids need to be unique.
function createInput() {
var newDiv = document.createElement("div");
newDiv.className = 'group';
var inputElem = document.createElement("input");
inputElem.type = "text";
newDiv.appendChild(inputElem);
var btnElem = document.createElement("button");
btnElem.type = "button";
btnElem.textContent = "-";
btnElem.addEventListener("click", removeUrlBox);
newDiv.appendChild(btnElem);
var element = document.getElementById("TextAreaBtn");
element.appendChild(newDiv);
}
function removeUrlBox() {
this.closest('.group').remove();
}
<button type="button" id="URLbtn" onclick="createInput()"> + Add URL</button>
<div id="TextAreaBtn"></div>
This should do the trick:
const txtarea=document.getElementById('TextAreaBtn');
document.getElementById('URLbtn').onclick=()=>txtarea.innerHTML+=
'<div><input type="text" class="URLtxt"><button class="rmvbtn">-</button></div>';
txtarea.onclick=ev=>ev.target.className==="rmvbtn"&&ev.target.parentNode.remove()
<button type="button" id="URLbtn"> + Add URL</button>
<div id="TextAreaBtn"></div>
I replaced your id attributes with class attributes, as these don't need to be unique.
I reduced your script by using innerHTML instead of laboriously putting elements together with createElement(). This is a matter of opinion as both methods have their advantages.
I also used delegated event listener attachment for the removal buttons. This way you can get away with a single event listener on div.TextAreaBtn. The attached funcion will only trigger any action if the clicked element has class "rmvbtn".
Change
btnele.onclick=RemoveUrlBox()
to
btnele.addEventListener('click', function (e) {
// `this` is the button that was clicked no matter about the id
// `this.parentNode` is the div you want to remove
const nodeToRemove = this.parentNode;
nodeToRemove.parentNode.removeChild(nodeToRemove);
});
I have created a button in javascript. Now I can add button text on to it but with information icon.
I have created a button using javascript like this
<script>
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Now, I know ⓘ is html entity of information icon
<button style="font-size:24px">Click meⓘ</button>
This is the output from this code
The above code will produce the required thing i.e button name + icon.
but if i do this
var t = document.createTextNode("Click me"+"ⓘ");
it will not work.It will print text(ⓘ) only on button.I want to achieve same thing in javascript created button using javascript only.
I have also tried
x.classList.add("fa fa-info-circle fa-6")
font awesome class for info icon but it throws error.
Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-info-circle fa-6') contains HTML space characters, which are not valid in tokens.
Is there any way to use html entities in javascript or any other simpler method to achieve the same.
Thanks,
You can either change the innerHTML of the button instead of creating a text node, since text nodes display text as-is:
<button onclick="myFunction()">ADD ANOTHER BUTTON</button>
<script>
function myFunction() {
var x = document.createElement("button");
x.innerHTML = "Click me ⓘ"
document.body.appendChild(x);
}
</script>
Or, you can use the unicode value of the character, in your case, it's \u24d8:
<button onclick="myFunction()">ADD ANOTHER BUTTON</button>
<script>
function myFunction() {
var x = document.createElement("button");
var t = document.createTextNode("Click me \u24d8");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Here is what you should change to make it work for font awesome:
x.classList.add("fa", "fa-info-circle", "fa-6");
Docs link for classList methods: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Methods
Final Result
function myFunction() {
var x = document.createElement("BUTTON");
var t = document.createTextNode("Click me");
x.classList.add("fa", "fa-info-circle", "fa-6");
x.appendChild(t);
document.body.appendChild(x);
}
The createTextNode method creates a text node and shows contents as plain text. To display HTML, you need to use the innerHTML property. Also, you missed the semicolon.
function createButton(html) {
var btn = document.createElement('button');
btn.innerHTML = html;
document.body.appendChild(btn);
}
createButton('Click me ⓘ');
I'm working on this website www.betamaths.eu
When a user had clicked inside one of the divs that have placeholder text and then click a button on the left, I would like the text from that button to append inside the div.
I have this code from another user which appends or prepends text ouside the div (not what I am looking for. You can test it with the lowercase alpha button in the menu on the left of the webpage listed above if you wish to get a better understanding.
<script type="text/javascript">
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('<div>Test'+No+'</div>');
No++
});
});
If I change the line
$('#answer_step1').append('<div>Test'+No+'</div>');
to
$('#answer_step1').append('Test'+No);
nothing happens. Any help is appreciated. If I can get one of these working, the rest will be easy.
You must have a syntatically error in your code, because I used your same code and was able to accomplish the append();
HTML:
<button id="alpha">
Click
</button>
<div id="answer_step1">
hi
</div>
Javascript:
var No = 0;
var focusedElement;
$(document).ready(function() {
$('#answer_step1').on('click','div',function() {
focusedElement = this;
});
$('#alpha').on('click',function() {
$('#answer_step1').prepend('Test' + No);
No++
});
});
https://jsfiddle.net/typtzr7z/
I have a javascript function, used to increase and decrease the height of div.
This is the code
function chk()
{
var node = document.getElementById('content');
node.classList.toggle('expand');
}
Works with this HTML code:
<div id="hite">
<div id = "content">
This is dummy text.
</div>
<div id="button" onclick="chk()">
click to read
</div>
</div>
I want the text to change in button div, once user click on it, and when again click on it, text should be again 'click to read'.
Try add this:
document.getElementById('button').innerHTML = node.classList.contains('expand')? 'hide':'click to read';
http://jsfiddle.net/rooseve/Bup8u/
You can use innerHTML property.
var ele = document.getElementById('button');
if (ele.innerHTML == "click to read")
ele.innerHTML = "User click on it!";
else
ele.innerHTML = "click to read";
you can also use "textContent" if you want to add only text and not html data.
if(document.getElementById("button").textContent!='click to read'){
document.getElementById("button").textContent="your content";
}else{
document.getElementById("button").textContent="click to read";
}
Hi I was wondering is there a way to hide a fixed footer with a button, so it can be closed by the user if they want to see more of the screen and vise versa. Is there a way to do this with css or will it require javascript?
cheers.
JavaScript
<input type="button" id="myButton" onclick="HideFooter()" />
function HideFooter()
{
var display = document.getElementById("myFooter").style.display;
if(display=="none")
document.getElementById("myFooter").style.display="block";
else
document.getElementById("myFooter").style.display="none";
}
JQuery
$("#myButton").click(function(){
if($("#myFooter").is(":visible"))
$("#myFooter").hide();
else
$("#myFooter").show();
});
If you want some other nice effects
$("#myFooter").fadeOut(500);
$("#myFooter").slideUp(500);
$("#myFooter").slideToggle(500); //Hide and Show
Another method, as Bram Vanroy Suggested:
$("#myButton").click(function(){
$("#myFooter").toggle();
});
It will require JavaScript. Your button click event handler needs to change the display property of the footer to none.
Here's a javascript only version, with the button having and id of "button" and footer id of "footer". This method will allow you to show the footer again after hiding it, if the user wants to see it again.
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('footer');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
Or with jQuery:
$("#button").click(function() {
$("#footer").toggle();
});
A nice tutsplus video tutorial for exactly what you need. It's a simple bit of jQuery.