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>
Related
I want to click and send text within a textbox but not able to find the element.
This is the html I want to click and send text
<div class="text_write_g comment_write">
<div class="inner_text_write">
<div class="box_textarea">
<textarea placeholder="add coment." maxlength="600" style="height: 86px;"></textarea>
</div>
<div class="wrap_menu">
<div class="area_l">
<button class="btn_g_ico btn_item image_upload_button" data-image-url="" data-image-name="" data-image-size="" id="attach_uploader0"><span class="ico_bbs ico_photo">image_upload</span></button>
<div class="keyboard_wrapper">
<div id="buttonLayer0">
<button id="keyboardBtn0" class="keyboard_btn btn_g_ico btn_item"><span class="ico_bbs ico_emoticon">imoticon</span></button>
</div>
</div>
</div>
<div class="area_r">
<span class="num_text"><span class="sr_only">text_number</span><span class="num_count empty">0</span>/<span class="sr_only">total_text_number</span>600</span>
<button class="btn_g_ico btn_item secret_button " data-is-hidden=""><span class="ico_bbs ico_lock_state">secret_reply</span></button>
<div class="btn_group">
<button class="btn_g full_type1 confirm_button" style="font-size: 13px;">confirm</button>
</div>
</div>
</div>
</div>
</div>
I tried around 100ways but not work it...;(
I googled it also searched in stackoverflow
please please help this newbie
I struggled 3days already...:(
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')";
}
:)
Need to display a div when the user clicks the button.
//html-code
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div class="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button class="info-button"><span>Läs mer </span></button>
</div>
//js-code
document.getElementByClassName("info-button").addEventListener("click", function(){
document.getElementByClassName('info-text').style.display = "block";
});
Any advice how I can get this to work? Also tested with onclick but that doesn't work either.
You're passing elements classes to the .getElementById function. In short, you could change your HTML to this:
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div id="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button id="info-button"><span>Läs mer </span></button>
</div>
And it would work
It's actually "getElementsByClassName" you missed the s and it gets a collection so you need to be specific on which one you are targeting. Given your code, you want the first/only element
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://jsfiddle.net/cbye0ph9/
document.getElementsByClassName("info-button")[0].addEventListener("click", function(){
document.getElementsByClassName('info-text')[0].style.display = "block";
});
<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.