I am beginner so please don't make too much fun of me, but I am having issues trying to get separate buttons to react when clicked. The current code that I have written will dim the all of the buttons when I click on only one of them. The problem is that I have 4 buttons and I want them to all be independent, but I don't want to type the same code 4 times for each of them.
Here is my HTML:
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
Here is my jQuery code:
let buttonDim = function(){
$(".btn").on("click", function(){
$(".btn").addClass("pressed");
setTimeout(function(){
$(".btn").removeClass("pressed");
}, 100);
});
}
buttonDim();
I am aware that I have probably written the code ridiculously longer than it needs to be, but I am still learning.
Any help would be greatly appreciated, thank you.
Try js buttonDim() like this
$(".btn").on("click", function(){
var button=$(this);
button.addClass("pressed");
setTimeout(function()
{
button.removeClass('pressed');
}, 2000);
});
Related
I am really new to coding and I am following this video tutorial to make a website that displays someone's age in days depending on the prompt input. I am trying to link an onclick attribut to an HTML button that will link to my js function. the problem is that the onclick attribute will not read the js function as a string; thus, not functioning properly. I have tried to google the solution for almost an hour now, but I have not found anything that works. Please help. EDIT: I was told to add parentheses and it still did not work.
html code:
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>
</body>
</html>
js code:
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}
You need to call it with (). So, it will be onclick="ageindays()"
function ageindays() {
var birthyear = prompt("What year were you born.. Good friend?");
}
<div class="container1">
<h2>Challenge 1: Your Age in Days</h2>
<div class="flexboxcontainer1">
<div>
<button class="btn btn-primary" onclick="ageindays()">Click Me</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
</div>
<div class="flexboxcontainer1">
<div id="flexboxresult"></div>
</div>
</div>
<script src="project1.js"></script>
The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined
at HTMLButtonElement.onclick (ThfJ8q9:58)"
What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.
HTML:
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JAVASCRIPT DOCUMENT:
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation-
MRP.png')";
}
Could use something like this to listen for a click on the button
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" id="btns"> <img class= "submit-button-
img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
var btntrigger = document.getElementById('btns');
btntrigger.addEventListener('click', function(){
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
})
Or have a closer look at your syntax on the orginal, fixed here:
https://codepen.io/CTBroon/pen/RwbRGQq
HTML
<div id="chat">
<div class="button-class">
<button type="button" onclick="textpage()">
<img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
</div>
</div>
JS
function textpage() {
document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}
:)
How do I handle this div using Selenium?
<div onclick="Hover_Menu();Toggle_LevelToolMenu(this,event);"
class="edittop edit-one"></div>
I want to click on this and work with the menu that will be displayed. I believe I will be able to handle the menu that is display, however, I am not able to click on this div.
I tried using
driver.findElement(By.xpath("xpath")).click();
Thought I would use JavascriptExecutor but getElementbyId will not work since this is div and there is no ID associated
Example:
<div style="height:25px; width:55px;">
<div onmouseover="Hover_ToolBarMenu();" class="edit_box">
<div onclick="return Click_ToolBarMenu('Edit',1019, 9189707,event, this)" class="editopt edit">
Edit
</div>
<div onclick="Hover_LivesMenu();Toggle_ToolBarMenu(this,event);" class="editopt edit-dot dot"></div>
</div>
<div class="clr"></div>
<div style="display:none; position:relative;" class="qm_ques_level_menu">
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Delete',1019, 9189707,event, this)" class="menu_buttons img_ico del">
Delete
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Copy',1019, 9189707,event, this)" class="menu_buttons img_ico copy accor">
Copy <span class="arrowIcon">?</span>
</div>
<div onmouseover="Hover_LivesMenu();" onclick="return Click_ToolBarMenu('Move',1019, 9189707,event, this)" class="menu_buttons img_ico move accor">
Move <span class="arrowIcon">?</span>
</div>
<div onclick="return Click_ToolBarMenu('Deposit2QB',1019, 9189707,event, this)" class="menu_buttons img_ico qb">
Deposit to Bank
</div>
</div>
<div></div>
</div>
http://selenium-python.readthedocs.org/en/latest/locating-elements.html
can you not use CLASS_NAME
driver.find_elements(By.CLASS_NAME, 'edit-one')
or
driver.find_element_by_class_name('edit-one')
Find and click an item from 'onclick' partial value
How about something like this?
driver.find_element_by_css_selector("div[onclick*='Hover_Menu']")
Selenium: How to select nth button using the same class name
How about this one (would required the div to be in a static position)
var nth = 2;
var divs = driver.findElements(By.className("edit-one"));
var div = divs.get(nth);
div.click();
I was able to figure this out. I used jQuery for invoking the onclick function in this div
Below is the jQuery I used
var event = document.createEvent('Event');$('.editopt.edit-dot').get(0).onclick(event)
Thanks everyone who posted and helped me on this.
<div class="Banner">
<div class="container">
<table><td>
<h1 id="overskrift">myhead</h1>
<p id="midtext">
fillertext
</p>
<p id="sluttekst">
morefiller
</p>
</td>
<td>
<img src="2.jpeg" id="billedSkift" height="200px"width="200px"></img>
</td>
</table></div>
</div>
<center>
<div class="container" >
<div class="btn-group btn-group-lg" role="toolbar">
<a class="btn btn-default" href="#" id="changetxt" role="group" >Kuvertering</a>
<a class="btn btn-default" href="#" id="printbrev" role="group" >Printbrevflet</a>
</div>
</div></center>
<script> $("#changetxt").on("click", function(){
var oeverskrift = 'the new headline';
var førstetext='the new text';
var andentext='some more new text';
document.getElementById('overskrift').innerHTML = oeverskrift;
document.getElementById('midtekst').innerHTML = førstetext;
document.getElementById('sluttekst').innerHTML = andentext;
});
</script>
I have used this method to change similar text in a testdocument however i seems to completely ignore the script here, i have tried several methods however none succesful even though the button is responsive.
ive run myself into a mindbogling corner any suggestions/help is greatly appreciated
1: You have a small typo:
document.getElementById('midtekst').innerHTML = førstetext; // typo 'midtekst' should be 'midtext'
2: Did you remember to embed jQuery above your JavaScript?
3: The ø in var førstetext='the new text'; breaks it on my local machine in Chrome but not in Safari. The fiddle works in both browsers. Try removing the ø.
I'm trying to simply hide something when the page loads...I'm actually going to have quite a few things hidden eventually, but right now I can get this to hide. I've scrolled some of the answers I've found on SO, but can't get it working. I have to keep the .jumbotron class for css so I simply added an id onto it...........not sure if that's the problem or what....here's my code. I left out the beginning as nobody really needs to see that.
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4">
</div>
</div>
<hr>
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
<script>
//doesn't work
$(document).ready(function(){
$('.jumbotron #second_slide').click(function(){
var index=$('.jumbotron #second_slide').index(this);
$('.jumbotron #second_slide').hide();
});
});
It doesn't work because there is no element with an ID of 'second_slide' inside an element with a class of 'jumbotron'.
Try this:
$('.jumbotron#second_slide').hide();
Try this
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div></div>
Try
$('#second_slide').click(function(){
var index=$('#second_slide').index(this);
$(this).hide();
});
It looks like the problem is the selector in $('.jumbotron #second_slide'). All you need is the id: $('#second_slide').
$('.jumbotron #second_slide') is trying to find an element with id="second_slide" within the class="jumbotron" divs.
Did you read http://api.jquery.com/category/selectors/ ? Writing something like .clazz #id you actually want to search for the id inside .clazz. You should probably iterate through those jumbotrons and select one you're interested in, then extract that component.
I'll have a go:
$(function(){
$('#second_slide').click(function(){
$(this).hide();
});
});
That's the entire <script> element.