Hi i am trying to append the div to the button with the corresponding to that button text
(i.e. In the case of below example the button text is "Download" so i am appending the div class as new and if the button text is "Upload"
i will append some other div class).
And for the appending div I am using wrap API.
Here is my code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button class="btn" title="run">Download</button>
<script>
$(document).ready(function() {
var buttontext = $("button").text();
alert(buttontext);
$('button[text="Download"]').wrap("<div class='new'></div>");
});
</script>
</body>
</html>
I am trying to get the button text like this button[text="Download"] but it is not working.
Finally i want the output something like this
<div class="new">
<button class="btn" title="run">Download</button>
</div>
Any help will be appreciated.
You could user jquery's contains method:
$(document).ready(function() {
$('button:contains("Download")').wrap("<div class='new'></div>");
});
Here is a working codepen:
http://codepen.io/egerrard/pen/MJpwdz
And the documentation on contains:
https://api.jquery.com/jQuery.contains
Related
Is it possible that when click the button from a.html then move to b.html and show a layer(b.html) ?
I searched some similar example like active tab specific from another HTML.
Using javascript event like hash.location....
Anyone know how to make it and some examples? Thank you
You need 2 HTML files. Let's say you have a.html and b.html in the same folder.
If I understand correctly, you want to change the page when clicking on a button.
You now have 2 solutions :
listening to a click on the button
using a little trick, by having a button element inside a link tag <a>.
Listening to a click on a button
Let's say you have this button in your a.html file :
<button id="pageChanger">Change Page</button>
Then you need to add this JS :
document.getElementById('pageChanger').addEventListener('click', () => {
window.location = 'b.html';
})
(Don't forget that it has to be added at the end of your document, or else it will not load properly
Having a button inside a link
You just need to add this HTML code :
<button>Change page</button>
For example, suppose two html pages are as follows:
page1.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<button type="button" onclick="window.location.href = 'page2.html#myDiv'">Goto Div in Page 2</button>
</body>
</html>
page2.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<div>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="myDiv">
This is my div
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
When you click on the ‌Button in the first page, window redirects to the layer in the second page.
In this example, anchor part is used. The anchor part is the part of the URL after the hash sign (#).
Example:
<button type="button" onclick="window.location.href = 'https://stackoverflow.com/jobs?med=site-ui&ref=jobs-tab#profile-summary'">Go!</button>
hi i want to reload a div when i click on a button, am looking for simplest code using JavaScript, i tried several codes but none of them worked,this is my last script and it didn't work either
this is my code
You can use the html() method in jquery to get the content as well as modify the content of a div.
Find the working example here:
https://jsfiddle.net/dke1Lw5n/
Find the code below:
<html>
<head>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function () {
$('#publish').html($('#publish').html() + 1);
});
});
</script>
<body>
<div id="publish">5</div>
<button type="button" id="btn_click">clickme</button>
</body>
</html>
I'm new to HTML and JS so i would be very grateful if someone helped me with the following - I have a normal page that contains a plus (+) button:
<button style="background-color:#0099CC" id= "firstbutton" type="submit" data-role="button" data-theme="b">Add
<script>
$(function(){
$('#firstbutton').click(function(){
$(this).before('<button type="submit">add</button>');
});
});
</script>
I want to add another button above the add button when I click on the add button. Any help?
Use following jquery code:
$("button").click(function(){
$(this).parent().prepend("<button style=\"background-color:#0099CC\">Add</button>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="background-color:#0099CC" id= "firstbutton" type="submit" data-role="button" data-theme="b">Add</button>
Using jquery which is a javascript library, you need to first download it or you can include this in the head section of your HTML
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
after doing it inside the script tag which will be below the above inclusion:
<script>
$(function(){
$('#firstbutton').click(function(){
$(this).before('<button type="submit">add</button>');
});
});
</script>
I'm trying to pass a div's id to a javascript function that does something simple, like change the background color of the div.
Weird thing is, my code works in the w3schools.com Tryit editor, but not in JSFiddle. It also doesn't work in my compiler (Coda 2).
Is this even the right way of going about this? Here's my code:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
asdf.style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor(myDiv)"> Set background color </button>
</body>
</html>
and here's the JSFiddle stuff: http://jsfiddle.net/BH9Rs/
You need to use document.getElementById to get the element from the id
function changeBackgroundColor(asdf){
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
and pass the id like this (in single quotes)
<button onclick="changeBackgroundColor('myDiv')">
And in your fiddle put your function inside the Head section.
(select no-wrap in Head) at left side Framework and Extension option
Js Fiddle Demo
Change the script placement combo to no wrap - in <head> (second combo box on the left panel)
myDiv is an unknown identifier.
Use document.getElementById() in order to refer to your div:
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))"> Set background color </button>
In addition, you have to move your JS code in your HTML due to the jsFiddle environment: http://jsfiddle.net/BH9Rs/1/
<script>
function changeBackgroundColor(asdf) {
asdf.style.backgroundColor = "#fff000";
}
</script>
<div id="myDiv" style="background:red">this is my div</div>
<button onclick="changeBackgroundColor(document.getElementById('myDiv'))">Set background color</button>
Inline styles and inline click events? boo.
<div id="myDiv"> this is my div </div>
<button id="clickMe"> Set background color </button>
<script>
document.getElementById('clickMe').onclick = function(){
document.getElementById('myDiv').style.backgroundColor = '#fff000';
}
</script>
You mast do so:
<!DOCTYPE html>
<html>
<head>
<script>
function changeBackgroundColor(asdf)
{
document.getElementById(asdf).style.backgroundColor = "#fff000";
}
</script>
</head>
<body>
<div id="myDiv" style="background:red"> this is my div </div>
<button onclick="changeBackgroundColor('myDiv')"> Set background color </button>
</body>
</html>
I have create 3 buttons on the left menu for "Cars," "Music," and "Games"
When the user clicks one, it should load the appropriate contents into a DIV
in the main content area. Each button should replace the contents of anything
previously displayed in the div. I created my buttons, but I do not know how to
load the content into the main content div or how to replace the previous content.
Can you help please?
Use jquery load function
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
<script src="../js/jquery.js"></script>
<script>
function load(url){
$('#content').load(url);
}
</script>
</head>
<body>
<button onclick='load("url1");'>Content 1</button>
<button onclick='load("url2");'>Content 2</button>
<div id='content'></div>
</body>
UPDATE Ok lets clarify it a bit.
The code above uses jQuery lib. Look here for more info about load function.
If you cannot or dont want to use jQuery look here for JS solution.
If you want to use only static content then you have two another options:
//1: if the new content is only small portion of info text
<script>
function load(newContent){
document.getElementById('content').innerHTML = newContent;
}
</script>
<button onclick='load("some text 1");'>Content1</button>
<button onclick='load("another text 2");'>Content2</button>
<div id='content'></div>
//2: put content directly to your page the several DIVs and hide them
<script>
function show(index){
var n=2; // number of DIVs
//show desired content and hide any others
for(var i=1; i<=n; i++){
document.getElementById('content'+i).style.display = i == index ? 'block' : 'none';
}
}
</script>
<button onclick='show(1);'>Content 1</button>
<button onclick='show(2);'>Content 2</button>
<div id='content1'></div>
<div id='content2' style='display:none;'></div>