Button onclick to hide text - javascript

I have a JavaScript where I need to hide (and eventually show) some text by clicking a button. However, when I click the button, it does not call the function specified in the onclick parameter, and so nothing happens. Here is my source code:
<script type="text/javascript">
$(document).ready(function(){
var tip = 1;
$(".tip1").hide();
$(".tip2").hide();
switch (tip) {
case 1:
$(".tip1").show();
break;
case 2:
$(".tip2").show();
break;
}
function nextTip() {
$(".tip1").hide();
return;
}
});
</script>
<br/>
<div id='bg_container' style='background-image: url("<?=$PICS?>trackingpage_middle.jpg")' >
<img style='z-index:-1;' width='737px' src='<?=$PICS?>trackingpage_top.jpg'>
<div id='main_container' >
<form>
<input type="button" onClick="nextTip()" value = "Next Tip" />
</form>
<div class="tip1">
...
and so on.

Have you tried moving the function nextTip() out of $(document).ready to the global scope?

Take the nextTip() out of the $(document).ready(function(){} portion.

Since It seems you are using jQuery why don't you add:
$('input[type="button"]').click(function(){ $(".tip1").hide();});
to your $(document).ready( ... ) code ?

Related

Javascript removeAttribute style not working properly

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>

Events was not working properly in Javascript

I created a simple event script, which changes the image when clicked on the button. But unfortunately not changing, please help.
Error: I am not getting any error message also , just it was not changing the image.
<html>
<head>
<title>Events Practise</title>
<style>
#imtest{
width:100px;
height:150px;
}
</style>
</head>
<body>
<h4> This a practise page of Events and event handlers </h4>
<p> Hi this the practise page that changes the Html and Css contents in the page by Using the JavaScript </p>
<img id="imtest" src="marni.jpg" alt="Image corrupted">
<button onclick="eventtest()">Change Image</button>
<script>
function eventtest()
{
var imt = document.getElementById("imtest");
imt.onclick = change;
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
</body>
I created a simple event script , which changes the image when clicked
on the button
No you've created a script which set's a click handler on the image when the button is clicked and after that when the image is changed it will change.
If you want to change the image directly by clicking just set the click handler on it.
In the imt.onclick = change line you are forgetting the parentheses after the change. Replace it with change()
<script>
function eventtest()
{
change();
}
function change()
{
var imtchng = document.getElementById("imtest");
imtchng.src = "marni1.png";
}
</script>
or
<button onclick="change()">Change Image</button>

Button on click creates alert to show data-id attribute

I have a button like so:
<button data-id="1" onclick="showID()">Show ID</button>
And a function:
<script>
function showID() {
alert(($(this).data("id")));
}
</script>
I just want the data-id to be shown in the alert box. I've also tried
alert(($(this).data("id")));
But again nothing...
$(this) inside your click function indicates to either global in sloppy mode or undefined in strict mode.
You need to do like this:
<button data-id="1" onclick="showID(this)">Show ID</button>
<script>
function showID(elem) {
alert(($(elem).data("id")));
}
</script>
Try this
function showID(button) {
alert($(button).attr('data-id'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Currently this will not give you the right value, your code should be this way:
<button data-id="1" onclick="showID(this)">Show ID</button>
Then
<script>
function showID(e) {
alert(($(e).data("id")));
}
</script>
this doesn't work the way you are trying.
pass this on click.
Check out this fiddle.
Here is the snippet.
function showID(ele) {
alert(($(ele).attr("data-id")));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id="1" onclick="showID(this)">Show ID</button>
Here there is an example, you have to pass the id to function in the button tag:
JavaScript - onClick to get the ID of the clicked button

How to replace html button with plain text

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

How to Input and Output Javascript?

Ok Guys I need help in this case and please help if you can :(
I have following div created with text-type input
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input"/>
</form>
</div>
</div>
I have also created above .footer .mainBody
<div class="mainBody">
<script src="Scripts/main.js">
var h = document.getElementById('input').value;
document.write(h);
</script>
</div>
And I have included Javascript in it
I want to work it this way: when I input text in input tag to appear in .mainBody div.
And also do I need button to submit input or it can be done with key press for Ex. "Enter"?
Guys onkeyup="writeThis()" isn't working it just reloads page :(
To execute some events on keyevents, you need to write the onkeyup or onkeydown or any other key function in the element. And in that attribute you can add the function's name which would respond to the event. I will write my function's name as writethis() which will write the value to the div.
You then need to use this:
<input type="text" id="input" onkeyup="writethis()" />
And the function would be:
function writethis() { // the function
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h; // the input
}
This way, you will get the input written on a keypress!
You can also try and use some keyevents such as:
if(event.keyCode == 13) { // enter key event
/* key code for enter is 13
* do what so ever you want */
}
Ok, try this as your JS script content in html head section:
function writeOnBody() {
var inputText = document.getElementById('input').value;
var mainBodyEl = document.getElementById('mainBody');
mainBodyEl.innerHTML = inputText;
}
your HTML code:
<div class="footer">
<div id="footerInner">
<form>
<input type="text" name="enter" value="" id="input" onkeyup="writeOnBody()" />
</form>
</div>
</div>
<div id='mainBody' class="mainBody"></div>
I hope it helps. JSFiddle sample: http://jsfiddle.net/amontellano/JAF89/
var h = document.getElementById('input').value; // the value
document.getElementsByClassName('mainBody').innerHTML = h;
avoid using getElementsByClassName instead give you div a id and use getElementById..
rest is in my opinion the best solution..
and yes you can also you a button also all you have to do is call you function on onclick event like this
<button onclick="functionZ()">click me</button>
and define that functionZ in your java script
What we are doing here is..
Adding a button and a click event upon it..such that when that button will be clicked it will call a function for us..
Make sure to add your scripts in lasts part of your page as page loads from top to bottom so its good practice to add scripts just near to end of body

Categories

Resources