Hint button using jquery - javascript

I am trying to create a hint Button that displays the text when it is clicked. I know how to create using javascript in HTML but I am having difficulty creating it in jquery. Can somebody please give me an idea.
javascript code in HTML:
<button type="button" onClick="myFunction()">Hint!</button>
<p id="hint"></p>
<script>
function myFunction() {
document.getElementById("hint").innerHTML = "<em><u>hint here.</u></em>";
}
</script>

Assuming you have only one button, you can bind the event click and use the selector #hint.
The function $.html is used to set HTML code to the selected elements.
$('button').on('click', function() {
$("#hint").html("<em><u>hint here.</u></em>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Hint!</button>
<p id="hint"></p>

Related

Adding Functionality: on click add post title into textarea

I am having trouble adding this function to my site. I have CustomPostTypes with Products and a simple form on the site, what I would like to do is on click storing a variable with the post title and appending it at the textarea in the form. ( https://imgur.com/a/205JCHJ how it should work ).
I am a complete beginner with jQuery and Javascript so I would really appreciate if someone can gimme a guide on how to do this
<h2 id="post-title">Cake name 2</h2>
<button id="btn" onclick="appendToTextArea()">WhatsMyName</button>
<textarea id="txt-area" name="textarea"></textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
function appendToTextArea()
{
var button_name = $("#btn").text();//post title
$("#txt-area").append(button_name);
}
</script>

Changing Text of HTML Button Using Outside JS Variable

In my main HTML file, I create a variable using this script:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
//Creation of answerjson not shown
var choiceOne = answerjson[0].choice;
});
Later in my HTML, I create a button within a div using this code:
<div id= "one"><button class="button" id = "b1"></button></div>
How can I display the value of choiceOne as the label on button b1? I've searched online, but only found answers to this problem when the button is not in a div.
var choiceOne = "Some Text";
// jQuery
$("#b1").text(choiceOne);
// Regular JavaScript
document.getElementById("b2").innerHTML = choiceOne;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"><button class="button" id="b1"></button></div>
<div id="two"><button class="button" id="b2"></button></div>
Like this:
$('#b1').html(choiceOne);
but you need to do this in
$(document).ready(function() { });
so you are sure all of the DOM is ready and loaded ... not sooner
Access the button from inside your javascript and change the text on it using the following command:
document.getElementById("b1").innerHTML = choiceOne;
This is in regular JS. You can also use JQuery to select the container.

click on a link tag while using jquery ?

I have a link tag that doesn't contain a url, but instead it has javascript. I'm using jQuery and when I try the ".click()" function, it doesn't work. I searched through the website and found some answers but all of them open the "href" of the link tag and these answers won't be helpful in my case, here's an example of the code :
<button onclick="ClickMe();">CLick Me!</button>
<a id="test" href="javascript:alert('hi');">Alert</a>
<script>
function ClickMe() {
$("#test").click();
}
</script>
This is a shared project and my ability to change the html of the page is very limited.
Here's the example : http://jsfiddle.net/Ayman_Mohamed/ygDmW/1/
Use a Vanilla Javascript!
function ClickMe() {
$('#test')[0].click();
}
Here is your jsfiddle
Working demo http://jsfiddle.net/sp3WR/
If you want to use href use it like this
Also all the answers above contains the click way as well.
Hope this helps the cause :)
code
function ClickMe() {
window.location.href = $("#test").prop('href');
}
You are trying to fire click of anchor tag having id test which you havent binded you put alert on href not binding click, bind click event with href you will be able to fire it using click()
Live Demo
Html
<button onclick="ClickMe();">CLick Me!</button>
<a id="test" href="javascript:alert('Hi');" onclick="alert('href clicked')">Alert</a>
Javascript
function ClickMe() {
$("#test").click();
}
This might work
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("hi!");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="Click Me" />
</body>
</html>

How do I get HTML button value to pass as a parameter to my javascript?

I have multiple buttons corresponding to multiple text areas to clear. I need to send to have a function to handle all of these buttons and handle each seperately
<html>
<head>
<script src="jquery-1.6.js"></script>
<script type="text/javascript">
function getUniqueButtonValue(value)
{
alert(value);
$("value").hide();
}
</script>
</head>
<body>
<button id=someUinqueId value=something>Clear Selection</button>
</body>
</html>
Setting aside the fact that you're placing a unique id in the value attribute rather than the id attribute... here's a fiddle.
$(document).ready(function(){
$("button").click(function(){
var me = $(this);
// do whatever with me
alert(me.val());
me.hide();
});
});
There seem to be numerous problems with the code you've posted in your question. Firstly, (unless you're using <!DOCTYPE html> as your doctype) you can't have id values starting with a number.
Secondly, the jQuery (I'm assuming it's jQuery and not some other JS library) in your getUniqueButtonValue function is not going to work, because the selector is going to look for a value element, which is unlikely to exist.
I'm assuming that the value attribute of your button is meant to correspond to the id of another element, which you want to hide when the button is clicked.
As you have what appears to be jQuery code in your example, I will give you a jQuery solution to this, as it's far simpler:
$(document).ready(function() {
$("button").click(function() {
alert(this.value);
$("#" + this.value).hide();
});
});
Also, you don't close your body tag, but I'm guessing that's just a mistake in copying and pasting the code into the question.
You can do this:
<button id=123 value=uniqueId545 onclick="javascript:getUniqueButtonValue($(this).val());">Clear Selection</button>
try this
$("#123").click(function(){
getUniqueButtonValue($(this).val());
});
I'm not sure what you are trying to do here. If i guess correctly this is what you want (ids shouldn't begin with a number so I put an 'a' before the 123:
$("#a123").click(function(){
getUniqueButtonValue($("#a123").getAttribute('value');
}
function getUniqueButtonValue(value)
{
alert(value);
$("#"+value).hide();
}
</script>
</head>
<body>
<button id=123 value=uniqueId545>Clear Selection</button>
</html>
You can save yourself a lot of work by trying:
<button class="clearbutton" value="#Foo">Clear Foo</button>
<input type="text" name="foo" id="foo" />
With the following JavaScript:
$('.clearbutton').click(function(e) {
$($(this).val()).val('');
});

Can I assign an action from javascript dynamically?

Typically, I do this to prompt the alert box, and say Hello
<div style="color:#00FF00" onclick=alert("Hello"); id = "helloDivTag">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
But this time, I don't want to do it inside the html tag, I want to do it inside the js. How can I do so? Thank you.
i would recommend using the jquery framework then you just do this
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
implementing it would look like this you just put it in the header
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function(){
$('#helloDivTag').click(function(){
alert("Hello");
});
});
</script>
why i recommend using jquery and not simple javascript is because there is alot of other functionality that could get in handy almost everytime you want to do something
window.onload = function() {
document.getElementById('helloDivTag').onclick = function(){
alert('hi');
}
}
when the window loads the click event is attached to your div and whenever you do the clicks the alert happens. This is called seperating behvaiour from structure and style.

Categories