I need to change the image inside a div in HTML when clicking a label. I don't think I need to use jquery for that, I want to use just javascript. After some research, it looks simple, all the answers are the same, but I can't get it to work. I know the function when clicking the label works because the label change color, but the image doesn't change and I don't get any syntax error. I'm using chrome. I don't know what I'm doing wrong.
this is HTML/CSS code:
<html>
<body>
<div id="slc_on_label">
<img src=https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg>
</div>
<style>
#slc_on_label img {
position:fixed;
width:5.5%;
left:10%;
top:10%;
}
</style>
<label class = "button" id="button" onclick="run(this)">0</label>
<style>
.button {background-color:Powderblue;
font-size: 5vw;
}
</style>
<script src="question.js" ></script>
</body>
</html>
This is the javascript code:
function run(button) {
document.getElementById("slc_on_label").src="https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
button.style = "background-color:red";
}
You're trying to set the src attribute on <div id="slc_on_label"> instead of the <img> inside it.
You can use document.querySelector() to select the image inside the div:
document.querySelector("#slc_on_label img").src =
"https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg";
<html>
<head>
<style>
#slc_on_label img {
position: fixed;
width: 5.5%;
left: 10%;
top: 10%;
}
.button {
background-color: Powderblue;
font-size: 5vw;
}
</style>
</head>
<body>
<div id="slc_on_label">
<img src="https://ichef.bbci.co.uk/news/800/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg">
</div>
<label class="button" id="button" onclick="run(this)">0</label>
<script>
function run(button) {
document.querySelector("#slc_on_label img").setAttribute('src', 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg');
button.style = "background-color:red";
};
</script>
</body>
</html>
function run(button) {
document.querySelector('slc_on_label img').src =
'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_1280.jpg';
button.style.backgroundColor = 'red';
}
Also not breaking the button style.
Again I got a problem with JavaScript, but this time is something more complex.
I'm trying to make a little JavaScript text editor. Basically it's an experiment, a test and the thing should be easy. I have a <h1> HTML element, and a <p> HTML element, and both of them change, as the user writes on a <input type="text" /> element and a <textarea></textarea>.
Now, everything work fine, but there is a problem. For making a space between lines, the user can't just press Enter, but of course need to use the <br /> HTML tag.
So my idea was to make a little button that allows the user to add this tag by pressing that button.
And JavaScript just makes a variable of the actual text, save it and add at the end of it the <br />. The result should be the text written by the user plus the break HTML tag.
And this works, if the textarea is empty and if you have never written something on it. It works and work even 10 or 20 times, but if you write something on it, it just stop working, even if you delete all the text. What is the problem in the code below?
<html>
<head>
<title>Text editor</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">
<style>
.title {
font-family: roboto;
text-align: center;
}
.text {
font-family: roboto slab;
text-align: justify;
margin-bottom: 40px;
}
.container {
width: 80%;
}
.textarea {
width: 100%;
height: 30em;
text-indent: 0.5em;
}
.title_box {
margin: 10px;
width: 20em;
padding: 10px;
font-size: 1em;
}
</style>
</head>
<body>
<center>
<div class="container">
<h1 class="title" id="title_space">Title of the page</h1>
<p class="text" id="text_space">Content of the page.</p>
</div>
</center>
<hr />
<center><input type="text" class="title_box" placeholder="Title" id="title_box" /></center>
<textarea class="textarea" id="text_box"></textarea>
<input type="submit" value="Save" onclick="saveText()" />
<input type="submit" value="br" onclick="br()" />
<script>
function saveText(){
var title = document.getElementById("title_box").value;
var text = document.getElementById("text_box").value;
document.getElementById("title_space").innerHTML = title;
document.getElementById("text_space").innerHTML = text;
}
function br(){
var actualtext = document.getElementById("text_box").value;
var processedtext = actualtext + "<br />";
document.getElementById("text_box").innerHTML = processedtext;
}
</script>
</body>
</html>
When you're updating the text area, instead of:
document.getElementById("text_box").innerHTML = processedtext;
Use:
document.getElementById("text_box").value = processedtext;
Try to add this to your JavaScript code just before changing the text
text = text.replace(/\r?\n/g, '<br>');
Line breaks are \r\n or \n while HTML line break is <br> and that is the problem.
This in case I understood your question correctly.
Here is the code running
I've added a button inside a link tag, with a little cross image, that I will eventually use to actually remove that element without it following the link also:
function detectClick(message) {
window.alert("Detected: " + message);
}
<div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="http://www.google.com"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>
How do I consume that click, once it has executed detectClick(...), in order to prevent navigation away from the current page?
NOTE: Ideally, without using jQuery.
First change your function to:
function detectClick(message){
window.alert("Detected: " + message);
return false; // add this line
}
then change the onclick handler to:
onclick="return detectClick('Google')" // note the "return"
Please do note that AFAIK the HTML standard does not allow to have a button inside an anchor.
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
return false;
}
</script>
You need return false; at the end of detectClick and you need to return detectClick on your onclick event.
Explanation: The return value of the event handler tells the browser whether the default browser action should occur. Since clicking on your button by default triggers the click event of its parent, the link, return false; will prevent that default from happening, which is your exact intention.
Remove your href tag from link tag. Add a id to that link tag. And assign the href value in the detectClict(). like-->
<html>
<head>
<title>Consume Click Test</title>
</head>
<body>
<div><a id = "link" style="border: solid 1px black; vertical-align:middle; display:inline-block;" > <button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a> </div>
</body>
</html>
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
document.getElementById("link").href = "http://www.google.com";
}
</script>
<html>
<head>
<title>Consume Click Test</title>
</head>
<body>
<div><a style="border: solid 1px black; vertical-align: middle; display:inline-block;" href="javascript:void 0;"><button style="position: relative; float: right;" onclick="detectClick('Google')"><img src="cross.png"></button>Google</a></div>
</body>
</html>
<script type="text/javascript">
function detectClick(message){
window.alert("Detected: " + message);
}
</script>
I am new all around HTML and JavaScript. Now I am trying to build a simple program that get input from the command line by the user and print it on the big console window. Now when I insert a simple text it does not print nothing into the box. Is there a special object should I use?
this is my code:
</head>
<body>
<img src="img/Mellanox_logo.jpg" alt="logo" align="middle">
<h1>Menu</h1>
<div id="container1" >
<div id="console" >
<p>
<script>
function showVal(){
var tmp = document.lineform.command_line.value;
document.getElementsByName('command_line').value = tmp;
}
</script>
</p>
</div>
<div >
<form id="form1" name="lineform" >
<input id="commandline" type="text" name="command_line" placeholder="Command line" onclick="showVal()" >
</form>
</div>
</div>
</body>
</html>
this is the css:
h1{
color: black;
text-align: left;
}
p{
color: black;
text-align: left;
font-size: 20px;
}
#container1{
width:1300px ;
}
#form1{
width:1300px ;
}
#console{
border:5px solid dodgerblue;
background-color: white;
height: 650px ;
padding-left: 5px;
margin-bottom: 5px;
position: relative;
width: inherit;
}
#commandline{
width: inherit;
border: 5px solid dodgerblue;
height: 30px;
padding-left: 5px;
font-size: 18px;
position: absolute;
}
this is how the command line and the window looks like:
1.- For this case i think you should be using getElementById instead of getElementsByName.
2.- I'd recommend not using a form, but instead have the input in the div's "root".
3.- A text input doesnt have a onclick (or at least it doesn't do what you want it to do)
4.- Add a button type input that executes the code through onclick="blabla();"
5.- i'd recommend putting your script at the end of the page since it works with the DOM and you're not using JQuery.
6.- add an id to the <p> element inside of the console <div>
<body>
<h1>Menu</h1>
<div id="container1">
<div id="console">
<p id="console_content">
</p>
</div>
<div>
<input id="commandline" type="text" name="command_line" placeholder="Command line">
<input id="commandButton" type="button" name="command_button" value="confirm" onclick="showVal();">
</div>
</div>
</body>
7.- new script:
<script>
function showVal() {
var tmp = document.getElementById("commandline").value;
document.getElementById('console_content').innerHTML += (tmp + "<br/>");
}
</script>
Here's a JFiddle so you can see it works:
https://jsfiddle.net/bLehLrum/
The function you are using returns an HTMLCollection, you need to the following:
Change,
document.getElementsByName('command_line').value = tmp;
To
document.getElementsByName('command_line')[0].value = tmp;
This gets the first element in the array, notice how there is an s at the end of getElements which suggests plural. This should help you in the future.
Reading Material
getElementsByName
Exdending Script47 answer, The problem is you are taking the value from input field and setting the same value again to it, That's why you are seeing any change/affect.
If by the box you mean the console, you should change your function with this
function showVal(){
// get the value of the input
var tmp = document.getElementById('commandline').value;
// add to the innerHTML of the console the tmp value
document.getElementById('console').innerHTML += "<p>"+tmp+"</p>";
}
document.getElementById
Your code try to reassign the value of command_line with the same value.
document.lineform.command_line.value could be the same as document.getElementsByName('command_line')[0]
I have used an online email encoder to generate a sort-of harvester-proof email-link, but this link won't adapt to my styling. Does anybody know how I can style this kind of link? As of now I don't know where to call the css class.
Here is an example of the link I've encoded:
<div class="mailto-link"><script type="text/javascript"><!--
var gefmyis = ['m','r','l','l','i','a','m','m',' ','e','o','a','"','h','m','e','<','e','/','o',':','a',
'>','a','s','t','c','m','s','l','"','=','.','i','t','>',
'l','f','i','#','.','s','s','"','<','e','"','o','a','c',
't','l','m','t','#',' ','c','=','e','e','i','t','a','a'];
var lmmezyh =
[29,4,25,55,54,53,9,22,31,5,14,23,38,3,40,51,0,17,61,28,15,
34,45,62,36,13,27,52,18,43,8,37,26,24,49,63,33,6,11,20,56,35,
48,30,60,39,44,58,1,32,46,12,59,16,50,2,57,7,47,21,42,19,10,41];
var bsmqvte= new Array();for(var i=0;i<lmmezyh.length;i++)
{bsmqvte[lmmezyh[i]] = gefmyis[i]; }for(var i=0;i<bsmqvte.length;i++)
{document.write(bsmqvte[i]);}
// --></script>
<noscript>Please enable Javascript to see the email address</noscript></div>
Thanks!
Edit:
By just inspecting in Console what is actually created by that script you'll notice this:
<a class="email" href="mailto:test#email.com">test#email.com</a>
means a.email in your CSS will suffice:
a.email{
font-weight: bold;
color:red;
}
http://jsfiddle.net/990exhow/
Simply use:
a[href^="mailto:"]{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/1/
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
Or wrap all into a SPAN
<span class="mailtoStyle">
<!-- all in here -->
</span>
and in your CSS:
.mailtoStyle a{
font-weight: bold;
color:red;
}
http://jsfiddle.net/pbve1aum/2/