I have this code to change the color of elements like the Background-color,text color,active link color,visited link color etc. inside a div. I have to enter the color for each in the text-boxes and accordingly the color of background,text color,link colors would change. This is the program objective.
But I can't change the colors of the active, followed and visited links. How to do that with only HTML, CSS and JavaScript? Please don't tell me any method using jQuery, as I don't know jQuery. I only want it it with JavaScript.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv"> hello
This is a Test<br/>
You Have Selected These Colors<br/>
This is a Test Link<br/>
</div>
</body>
</html>
I Updated your code by assigning the ID's to the elements. Here is the updated code. Try this code to see if it helps. Thanks.
<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("link").style.alinkcolor=al;
document.getElementById("link").style.vlinkcolor=vl;
document.getElementById("para").style.color=txt;
document.getElementById("link").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1">
<br/><br/>
Text: <input type="text" id="t2" name="txt2">
<br/><br/>
Link: <input type="text" id="t3" name="link">
<br/><br/>
Active Link: <input type="text" id="t4" name="alink">
<br/><br/>
Followed Link: <input type="text" id="t5" name="vlink">
<br/><br/>
<input type="button" value="test" onclick="fun();">
<br/><br/>
<div id="dv">
<p id="para">hello This is a Test<br/>
You Have Selected These Colors<br/><p>
<a id="link" href="#">This is a Test Link</a><br/>
</div>
Related
I have this Jquery/javascript code which clones a template element and assigns the clone an iterative ID (so the first clone is called 'eventCard0', the second 'eventCard1' etc.)
This works fine besides .prop('name', 'eventCard' + number) which for some reason doesn't change the clone's name attribute in the same manner as it changes the clone's ID. I can't figure out why this is at all
var newEventBtn = document.getElementById("newEventButton");
newEventBtn.onclick = function() {
let number = $('#events .eventInputs').length;
let cloneParent = "#eventCardTemplate";
let newClone = $(cloneParent).clone().prop('id', "eventCard" + number).prop('name', "eventCard" + number);
newClone.appendTo("#events");
}
This is the template tag <li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
And this is the entire HTML:
<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
?>
<html>
<head>
<title>Timeline Creator</title>
<link rel="stylesheet" type="text/css" href="timelineCreator.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="eventCardTemplate" name="eventCardTemplate" class="eventInputs">
<input type="text" name="eventName" class="eventName" maxlength="50" placeholder="Event Name" required>
<textarea name="eventDesc" class="eventDesc" placeholder="Event Description" required></textarea>
<p class="label">Start Date</p>
<input type="date" name="startDate" class="date" required>
<!-- <label for="startIsEnd">Start date = End Date</label>
<input type="checkbox" name="startIsEnd" class="startIsEnd"> -->
<p class="label">End Date</p>
<input type="date" name="endDate" class="date" required>
<p class="label">Political</p>
<input type="checkbox" name="political" value="political" class="checkboxes">
<p class="label">Economic</p>
<input type="checkbox" name="economic" value="economic" class="checkboxes">
<p class="label">Social</p>
<input type="checkbox" name="social" value="social" class="checkboxes">
</li>
<-- Back
<form action="createTimeline.php" method="post" id="timelineCreator">
<input type="text" name="timelineName" id="timelineName" maxlength="50" placeholder="Timeline Name" autofocus required>
<textarea id="timelineDesc" name="timelineDesc" placeholder="Timeline Description" required></textarea>
<ul id="events">
</ul>
<button type="button" id="newEventButton">+ Add Event</button>
<input type="submit" id="createTimeline" value="Create Timeline">
</form>
<script src="timelineCreator.js"></script>
</body>
</html>
Your element does not have the name property, so .prop won't change it.
Look at this link for a list of elements that do have the name property. https://developer.mozilla.org/en-US/docs/Web/API/Element/name
In this case you should be using .attr instead of .prop :
let newClone = $(cloneParent).clone().attr('id', "eventCard" + number).attr('name', "eventCard" + number);
Hi all i have this 3 forms:
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
and a button
<button type="button" onclick="merge()">merge</button>
Now i want that the function merge() takes the text inserted in the first 2 forms and put the append of the 2 string in the 3rd form.
i tried something like:
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}
</script>
idform1 , idform2 and idform3 are not the correct id's but it's just to be more clear.
Of course it's not working , can anyone help me out ? thanks
replace your code with this
<!DOCTYPE html>
<html>
<script src="put your path to jquery.js"></script>
<body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<label for="result" style="color: red;">Risultato:</label>
<input type="text" class="form-control" id="result" >
<button type="button" onclick="merge()">merge</button>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
</html>
You got every thing Just change this
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#idform3').val('r1+r2');}// this line
</script>
to
<script>
function merge(){
var r1= $('#idform1').val();
var r2= $('#idform2').val();
$('#result').val(r1+r2);}// to this
</script>
and if you have for more specification you can use String(yourValue) function like this $('#result').val(String(r1)+String(r2)) but here we don't really need this.
first you know you use wrong input tag id change correct ids then change val("r1+r2") to val(r1+r2). if you use variable there not string " " quote String Quote only for when normal text you set.
and finally you use jQuery under JavaScript so add in Head tag jQuery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
here your full code :
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function merge(){
var r1= $('#color1').val();
var r2= $('#color2').val();
$('#result').val(r1+r2);}
</script>
</body>
<label for="color1" style="color: yellow;">1° colore:</label>
<input type="text" class="form-control" id="color1" placeholder="Insert color">
<br>
<label for="color2" style="color: yellow;">2° colore:</label>
<input type="text" class="form-control" id="color2" placeholder="Insert color">
<br>
<label for="result" style="color: red;" >Risultato:</label>
<input type="text" class="form-control" id="result" >
<br>
<button type="button" onclick="merge()">merge</button>
</body>
</html>
JSFiddle
I want the div to be hidden when the page will be loaded, and then when you click the button it will show up on the page. But for some reasons it's acting really weird. what should I do?.
HTMl:
<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names">
<br>
<p>First name:</p> <input type="text" name="firstname">
<br><br>
<p>Last name:</p> <input type="text" name="lastname">
</div>
This is my javascript:
$(document).ready(function(){
$("#namebutton").click(function(){
$("#names").slideToggle("slow");
});
});
CSS:
#names{
display: none;
}
Your JSfiddle does not have jQuery included, and your code has a comma after "slow"
HTML:
<p>Don't have an Employee Number?</p> <button id="namebutton">Click Here</button>
<div id="names" class="hidden-div">
<br />
<p>First name:</p> <input type="text" name="firstname" />
<br /><br />
<p>Last name:</p> <input type="text" name="lastname" />
</div>
jQuery:
$(document).ready(function(){
$("#namebutton").click(function(){
$("#names").toggleClass("hidden-div", false);
});
});
CSS:
.hidden-div {
visibility: hidden;
}
See my JSFiddle example https://jsfiddle.net/SolveItSimply/j5y8fbsn/8/
If you want to use JavaScript and not jquery, you can try the below function :
window.onload = function() {
document.getElementById("names").style.visibility = 'hidden';
document.getElementById("namebutton").onclick = 'showNames()';
};
function showNames(){
document.getElementById("names").style.visibility = 'visible';
}
slideToggle doesnt work in this case. :)
I face problem that my div.hide is not working, because it just shows and whenever I click back link "reply" it's does not hide.
JavaScript
<script type="text/javascript">
$('body').on('click','a.btnGG',function(){
var va=$(this).data('comment_id');
$("#parent_id").val(va);
$("#formReply").attr("va",$("#formReply").attr("va") + va);
$(".formms").hide();
$(this).after('<div class="formms">'+$(".gg").html()+'</div>');
$("#hides").onclick(function (){
$(".gg").css("display","block");
});
</script>
tpl
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
I'm beginner programmer.
It's hard to tell what you are doing with your code. If you simply want to display div or hide clicking on reply button, there's a complete code (TPL file):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="javascript:;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
<form action="/commenter/web/index.php" id="formReply" method="Post" >
<input type = "hidden" name ="m" value = "{$m}" />
<input type="hidden" name="comment_id" id="comment_id" value="{$data.comment_id}"/>
<input type = "hidden" name="post_id" value="{$req.post_id}" />
<!-- <input type = "hidden" name="user_id" value="{$req.user_id}" /> -->
<input type = "hidden" name ="c" value = "do_add_comment_reply" />
<input type="hidden" name="parent_id" id="parent_id" value=""/>
<textarea class="form-control" name="message" placeholder="Please leave a reply of the comment "></textarea>
<input type="submit" id="btn_reply" name="btn_reply" class="btn btn-primary" value="Reply">
</form>
</div>
<script type="text/javascript">
$('body').on('click','a.btnGG',function() {
$(".gg").toggle();
});
</script>
</body>
</html>
<a href="javascript;" id="hides" class="btnGG" > reply</a>
<div class="gg" style="display:none;">
// Code
</div>
Change it to something like
<a href="#" id="hides" class="btnGG" > reply</a>
<div class="gg" id="testid" style="display:none;">
// Code
</div>
and use script like
$(document).ready(function(){
$("#hides").onclick(function(){
$("#testid").toggle("show");
});
});
I am not able to add a new input box after the onclick event is called and is there way to disable the select options after the input box appears? I am sorry for such a noob question but I am at the dead end here, been trying this for an hour. Please link me to a place where I can easily learn JS with examples.
<script>
function funcGet(val)
{
if(val=="Create new category")
{
var element = document.createElement("input");
element.setAttribute("type", "input");
element.setAttribute("name", "new_cat");
var foo = document.getElementById("cat");
foo.appendChild(element);
}
}
</script>
<div name="cat">
<form method="post" action="">
<input type="text" placeholder="Enter a topic name" name="word"><br/>
<select name = "category" onchange="funcGet(this.value);">
<?php
displayCat();
?>
</select>
</div>
<select name = "site_type">
<?php
displaySitetype();
?>
</select>
<input type="submit" value="Submit data">
</form>
Try changing <div name="cat"> to
<div id="cat">
.getElementById only works on IDs,
as in
document.getElementById("cat");
If you want to leave <div name="cat"> you should use .getElementsByTagName[0] instead.
As foir a a link to learn JavaScript by example, I recommend the W3Schools JavaScript Tutorial, as they let you try out code as you learn it on their website. Once you become more familiar, you can reference the Mozilla Developer Network.
Here
var foo = document.getElementById("cat"); is giving null
There is no element exist with id cat
Error is:TypeError: foo is null
Change this:
<div name="cat">
To this:
<div id="cat">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Untitled Document
</title>
<script>
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<td><input type='text'<td><input type='text'<td><input type='text' name='food'name='food'name='food'name='food'>";
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<td>
<input name="food" type="text" id="food" />
</td>
<td>
<input name="food" type="text" id="food" />
</td>
<div id="div">
</div>
<td>
<input type="button" value="Add" onclick="generateRow()"/>
</td>
<td>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>
</td>
</form>
</body>