Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i'm still new to this. . i want the value to display in a div that i already defined in css when i click a button. but the only thing that come out is the button. i just can't get the right result that i wanthere's what i've done.
<?php
var $val=001;
function increase(){
echo "<div id='display' >$val++</div>" ;
}
?>
<body>
<div id="display">
<button type="button" onclick="increse()">click me!!</button>
</div>
</body>
---------------------my #display in css-------------
.display{
height: 200px;
width: 500px;
background-color:#CECECE;
}
please help. or maybe refer me to something useful. thank you :)
<body>
<div id="display">
<button type="button" onclick="increase()">click me!!</button>
</div>
</body>
you should use javascript with this
`
function increase()
{
var val=001;
document.getElementById('display').innerHTML=val++;
}
</script>`
if you want to do this in php:
<body>
<div id="display">
<button type="button" onclick="<?php increase(); ?>">click me!!</button>
</div>
</body>
but this will not give the wanted results as this will append another div with same id display
HTML
<div class="likes">13</div>
<button class="btn">Increment</button>
jQuery
$('.btn').click(function() {
var num = parseInt($('.likes').text());
$('.likes').text(num+1);
});
JSFIDDLE DEMO
Now you can modify it according to your needs
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a button element that is hidden at the beginning.
However, I have to display it on certain trigger using JavaScript. But when its triggered it gets pushed to next line. See the Image below :-
What I actually want is :-
Here is my Html code:-
<div id="toolbar">
Launch Access Log Report <a href="#" style="display: none" class="btn btn-secondary" type="button" id="fresh" >Refresh Table Updated</a>
</div>
and my JavaScript code which push it to next line:-
function check(data)
{
if (data === 'no')
{ document.getElementById("fresh").style.display='block';}
}
What is messing it up please explain and how can I fix this issue.
display: block will start on a new line and will take up the full width available. Use display: inline-block or display: inline instead.
Using display: block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "block";
}
</script>
Using display: inline-block
<button onclick="show()">Show</button>
<div>
Launch Access Log Report
Refresh Table Updated
</div>
<script>
function show() {
document.getElementById("fresh").style.display = "inline-block";
}
</script>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need some help on editing elements which are in HTML with JavaScript. Is it possible to change the "text" with javascript? I've tried using document.getElementById but I don't think I'm doing it correctly.
Get the elemet with a query like you would use in css:
var element = document.querySelector('div.header');
Change the content using the textContent property:
element.textContent = "New Content;"
Adding image to content:
document.querySelector('div.header').innerHTML = "<img src='smiley.gif' alt='Smiley face' height='42' width='42'>";
Simple example with "press me" button that calls a function to change text
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
<html>
<script>
function changeText(){
document.getElementById("header").innerHTML = "changed text";
};
</script>
<body>
<div id="header">text</div>
<button onclick="changeText()">press me</button>
</body>
</html>
if querySelectorAll or getElementsbyClassName there are many ways to alter the text.
My answer is that you must think about your structure of the HTML Document.
You can use every ID only once. It is better to use data-lb="detail" etc. and classes for the div´s
Please see this not as an answer only as an tip.
You can try something like this -
<button id="click">
CLICK
</button>
<div class="header" id="textChange">Text</div>
And then in your JS -
$( "#click" ).click(function() {
$( "#textChange" ).replaceWith( "<h2>New heading</h2>" );
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I don't know if this will be a duplicate, but I've tried multiple scripts (not just in jQuery, but also in Javascript) to try to get the job done. Here's the HTML:
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
And jQuery:
$('#togglebutton').click(function() {
$('text').toggle('slow');
});
Click me to try the Fiddle
I hope you may be able to find a solution. Thanks :D
use #test instead of test to select an id attribute in jquery
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
Because you're selecting an ID, $('text') should be $('#text')
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
You're missing the # sign for the text attribute.
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
jQuery:
$(document).ready(function(){
$("button").click(function(){
$("#message").show();
});
});
HTML:
<div id="message">
<p> You will be their life line, please take your purchase seriously.</p>
</div>
This is the code that I have but I want to either show a message on click or animate it but I don't want it visible until clicked.
USe css for that
#message
{
display:none;
}
Or you can use jquery too.
$(document).ready(function(){
$("#message").hide();
$("button").click(function(){
$("#message").show();
});
});
Firstly, you need to set display in css:
#message{
display: none;
}
And then call the jquery to show it when the button is clicked:
$(document).ready(function(){
$("button").click(function(){
$("#message").show();
});
});
Using CSS:
<div id="message" style="display:none;">
Using JS:
$('#message').hide();
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<div class="main">
<textarea rows ="20" cols="80" name ="output_box" id ="output"></textarea>
</div>
What I want it to do is to add text to that area on a button click like so
<div class="classname" button type =onclick="myFunction()" >
Export
</div>
and this is what it calls
<script>
function myFunction()
{
var obj = document.getElementById("output").innerHTML;
var text = document.createTextNode("Test data");
obj.innerHTML = text;
}
</script>
But after much frustration I cannot figure it out.
Example with the changes below: http://jsfiddle.net/charlescarver/hZw6q/
Your JS should be closer to this:
var obj = document.getElementById("output");
var txt = "Test data";
obj.value = txt;
txt != text
As Matt Ball pointed out, "obj is a string," not an object.
You don't need document.createTextNode as you're using value instead of innerHtml
Your HTML should also be:
<div class="classname" type="button" onClick="myFunction()">
Export
</div>
And not:
<div class="classname" button type =onclick="myFunction()" >
Export
</div>