I need help with my code, because everything works except for one thing. After I input text in the three textboxes and click the button, I get a div with the text, but when I click on the text I want only the nummer part to get style="bold", not the whole div.
What's the easiest way to accomplish this, if possible, without putting the nummer text in its own element?
<html>
<head>
<title>Uppgift 6</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var $contact = {};
$contact.List= function() {
this.addContact= function(namn ,efternamn, telefon) {
var cont= new $contact.People(namn, efternamn, telefon)
document.body.appendChild(cont.element);
};
};
$contact.People= function(namn, efternamn, telefon) {
this.fNamn= namn;
this.eNamn= efternamn;
this.tele= telefon;
this.element= document.createElement("div");
this.element.innerHTML= namn+" "+efternamn+" "+telefon;
var ele= this.element;
this.element.addEventListener("click", function () {
ele.style.fontWeight="bold";
});
};
var myList;
function startUp() {
myList= new $contact.List();
}
</script>
</head>
<body onload="startUp();">
<form>
<input type="text" id="fNamn" placeholder="Föramn"/>
<input type="text" id="eNamn" placeholder="Efternamn"/>
<input type="text" id="tele" placeholder="Nummer"/>
<p></p>
<input type="button"
onClick="myList.addContact(document.getElementById('fNamn').value,
document.getElementById('eNamn').value,
document.getElementById('tele').value);"
value="Skriv ut"/>
</form>
</body>
</html>
There is no way to do this - you either work with the div element or you add a new element that has it's own properties you can work with. There is no way to change the properties of only a part of the text in an element.
Upload and use a custom font where only the numerals are bold.
Related
So I would like to make a calculator with some formatting to make it look nice. It keeps making a new line for my p tag and I don't want it to, is there any fix for this?
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");
function addAndDisplay() {
display.innerHTML = (Number(n1.value)+Number(n2.value)).toString();
}
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<h1>Addition</h1>
<h3>Value one:</h3>
<input type="number" id="n1">
<h3>Value two:</h3>
<input type="number" id="n2">
<br>
<button onclick="addAndDisplay()">Add</button>
<h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
</body>
</html>
EDIT: Thanks #Pipe and #Pointy I appreciate your help a lot!
Per default, a paragraph is a block level element. This means that it starts on a new line and takes up the full width. Maybe you should consider using something else.
For this kind of usecase, you would want to use <span></span>. Span is using display: inline which allows multiple inline-elements to appear next to each other.
It might be useful to read this article about the CSS display property - it will help you understand the suggested solution much better.
you shuld use span instead of p. p is paragraph element and span can be used to group elements for styling purposes
var n1 = document.getElementById("n1");
var n2 = document.getElementById("n2");
var display = document.getElementById("disp");
function addAndDisplay() {
display.innerHTML = (Number(n1.value)+Number(n2.value)).toString();
}
p{
display:inline-block;}
<!DOCTYPE html>
<html>
<head>
<title>Addition</title>
</head>
<body>
<h1>Addition</h1>
<h3>Value one:</h3>
<input type="number" id="n1">
<h3>Value two:</h3>
<input type="number" id="n2">
<br>
<button onclick="addAndDisplay()">Add</button>
<h3>The output: <p id="disp">You have not calculated anything yet</p>.</h3>
</body>
</html>
I have written code that creates a checkbox list where when i click the checkbox below my list of options i would like a link to show underneath that the user can click (show/hide) I cannot figure out why my code will not work. If the user unchecked the box the link disappears but nothing happens when i click my check boxes. I would like to do this fix in JQuery
<!DOCTYPE html>
<html>
<div class ="container">
<head></head>
<body>
<input id="grp1" type="checkbox" value="group_1" onClick="http://google.com" />
<label for="grp1"> group 1 </label>
<div>
<input id="grp2" type="checkbox" value="group_2" onClick="http://google.com" >
group_2</label>
</div>
</body>
</html>
You'll have to use javascript to hide/show the wanted elements in html. There are many approaches to this. The most basic one would be something like
<!DOCTYPE html>
<html>
<body>
<div id="container">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("container").onclick = function (e) {
//check every box if it's checked
if (document.getElementById('grp1').checked) {
document.getElementById('url1').style.display = 'block';
} else {
document.getElementById('url1').style.display = 'none';
}
if (document.getElementById('grp2').checked) {
document.getElementById('url2').style.display = 'block';
} else {
document.getElementById('url2').style.display = 'none';
}
}
</script>
</body>
</html>
Of course you can use different approaches like creating the element in javascript then adding it to the html if you don't like the idea if existing hidden elements. You might also use loops to loop through checkbox element and simply show/hide the url accordingly. And more to make the code flexible on any number of boxes. Something like this
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div id="checkBoxContainer">
<input id="grp1" type="checkbox" value="group_1"/>
<label for="grp1"> group 1 </label>
<br>
<input id="grp2" type="checkbox" value="group_2"/>
<label for="grp2"> group_2</label>
</div>
<!--hidden elements using css-->
Link for group_1
<br>
Link for group_2
</div>
<script>
//listen to the click event on the whole container
document.getElementById("checkBoxContainer").onclick = function (e) {
var linkNumber = 1; //This is number of the first url element with ud url1
var containerChildren = document.getElementById("checkBoxContainer").children;
//loop through the children elements
for (var i = 0; i < containerChildren.length; i++) {
var oneChild = containerChildren[i]; //catch only one child in a variable
//simply filter the input elements which are of type checkbox
if(oneChild.tagName === "INPUT" && oneChild.type === "checkbox"){
//Show or hide the url accordingly.
if (oneChild.checked) {
document.getElementById('url' + linkNumber++).style.display = 'block';
} else {
document.getElementById('url' + linkNumber++).style.display = 'none';
}
}
}
}
</script>
</body>
</html>
The onclick HTML attribute doesn't work that way. The attribute value is executed as javascript. You can make a js function to show/hide the link.
Hi you want to try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.group-link{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div class="jsParent">
<label for="grp1">
<input id="grp1" type="checkbox" value="group_1" onchange="showLink(this)"/> group 1
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/dogs-101/videos/the-doberman">Group 1 Link</a>
</div>
<div class="jsParent">
<label for="grp2">
<input id="grp2" type="checkbox" value="group_2" onchange="showLink(this)"/> group_2
</label>
<a class="group-link hidden jsLink" href="https://www.animalplanet.com/tv-shows/cats-101/videos/ragdoll">Group 2Link </a>
</div>
<script type="text/javascript">
function showLink(el){
var parent = el.parentElement.parentElement;
var linkEl = getAnchorEl(parent);
if(linkEl){
if(el.checked){
linkEl.classList = linkEl.classList.value.replace('hidden', '');
}else{
linkEl.classList = linkEl.classList.value + ' hidden';
}
}
}
function getAnchorEl(parent){
var childrens = parent.children;
var linkEl = null;
for (var i = 0; i < childrens.length; i++) {
var childEl = childrens[i];
if(childEl.classList.value.indexOf('jsLink') > -1){
linkEl = childEl;
break;
}
}
return linkEl;
}
</script>
</body>
</html>
Your question is undoubtedly a duplicate but I am answering because I would like to help you identify issues with the code you posted.
I notice you have a <div>tag between your tag and tag. Why? This is a bit of an over simplification but as a general rule never put anything between your <html> and <head> tag and only place <div> tags inside your <body> tag. Also be mindful of how you nest your elements. That tag starts after and before .
Even if that were correct placement you close the before you close your div arbitrarily in the middle of your body tag. you should never have
<div>
<p>
</div>
</p>
Instead it should look like this
<div>
<p>
</p>
</div>
In your onClick attribute you have a random URL. That will not open a new window. You new too put some javascript in there.
<input onClick="window.open('http://google.com')">
Also your second label tag does not have an opening, just a </label> close tag
To answer your question - I suggest you look at the jQuery toggle function.
<input type="checkbox" id="displayLink" />
Google
<script type="text/javascript">
$("#displayLink").click(function(){
$("#googleLink").toggle();
});
</script>
As a general rule you should favor event handlers (such as the $("").click() posted above) to handle events (like clicking) as opposed to html attributes such as onClick.
I'm really confused on how to go about this.
What I'm trying to do is, have a form in HTML (not <form>), just a bunch of <input> tags with a <button>.
Basically, in the javascript code, there's an event listener that activates the MakeCard() method, when the <button> is pressed.
The MakeCard() method is supposed to then replace the form (in the HTML body) with a <div> that has it's own random stuff.
How do I make this system work? Please no JQuery and other such libraries. I'm only allowed to use DOM.
This is the code I have so far:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="css/style.css"/>
<script>
window.addEventListener("load", function(){
var nameOfRecipient = document.getElementById("nameOfRecipient");
var colorInfo = document.getElementById("colorInformation");
var fontSize = document.getElementById("fontSize");
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient");
var resultColorInfo = document.getElementById("resultColorInformation");
var resultFontSize = document.getElementById("resultFontSize");
function MakeCard(){
// Make the card
// Show the results
ShowResults();
}
function ShowResults(){
// Show the user choices
resultNameOfRecipient.innerHTML = nameOfRecipient.value;
resultColorInfo.innerHTML = colorInfo.value;
resultFontSize.innerHTML = fontSize.value;
}
document.getElementById("submitButton").addEventListener("click", MakeCard);
});
</script>
</head>
<body>
<div id="headerContainer">
Welcome to the Card Maker!
</div>
<div id="formContainer">
<p>Name of recipient<input type="text" id="nameOfRecipient"></p>
<p>Color Information<input type="text" id="colorInformation"></p>
<p>Font Size<input type="number" id="fontSize"></p>
<input type="button" id="submitButton" value="Make Card!">
</div>
<div id="resultContainer">
<p id="resultNameOfRecipient"></p>
<p id="resultColorInformation"></p>
<p id="resultFontSize"></p>
</div>
</body>
PLEASE IGNORE THE LAST DIV WITH ID="resultContainer" and ignore all the variables that have the result in front. That stuff is other extra stuff.
It would be amazing if I could just know how to make an entirely new div that REPLACES the div with ID="formContainer".
First things first: Why use listeners when you can use onclick tags? Set the button like this, and change the listener to a dedicated function:
window.addEventListener("load", function(){
becomes
function myfunction() {
and don't forget to change the end of the script from }); to }..
Also, remove the listener from the button, which is this line.
document.getElementById("submitButton").addEventListener("click", MakeCard);
And add an onclick event to the button, and change it to a button type, to make sure it doesn't submit:
<button type="button" id="submitButton" onclick="myfunction()">Make Card!</button>
Secondly: You've set variables to actual HTML elements, which would show something like: HTML[buttonElement]... I'm assuming what you want is what was typed in the element, which is the "value" tag. You would get that by changing the variables to this:
var nameOfRecipient = document.getElementById("nameOfRecipient").value;
var colorInfo = document.getElementById("colorInformation").value;
var fontSize = document.getElementById("fontSize").value;
var resultNameOfRecipient = document.getElementById("resultNameOfRecipient").value;
var resultColorInfo = document.getElementById("resultColorInformation").value;
var resultFontSize = document.getElementById("resultFontSize").value;
So now that we've tidy'd up your syntax and stuff, I wanna get on to the part where you said you wanted to replace the DIV. Here's my way of doing it:
I would give every element in the DIV an ID (other than the button, we've already discussed that).
<p id="nameofrecipentp">Name of recipient<input type="text" id="nameOfRecipient"></p>
<p id="colorinformationp">Color Information<input type="text" id="colorInformation"></p>
<p id="fontsizep">Font Size<input type="number" id="fontSize"></p>
You could then call a function when the function myfunction() is called.
function myfunction() {
replacediv()
And define replacediv() to replace all the elements in the form to whatever you'd like.
function replacediv() {
document.getElementById("nameofrecipentp").innerHTML =
"Enter your data here"
document.getElementById("colorinformationp").innerHTML =
"Enter your data here, for the color information"
document.getElementById("fontsizep").innerHTML =
"enter your data here for font size"
}
I think I pretty much covered everything. If you still need help, tell me.
i need find all images from textarea value and then replaces with inputs text elements
and the value of those with the src of the img was reemplace
after that the final string is output on a new div ('#newDiv')
my script dont replace nothing i dont know why
here is what i have done so far,
<html>
<head></head>
<body>
<textarea id="caja"></textarea>
<input type="button" onClick="parsingHtml()" value="read">
<div id="newDiv"></div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
function parsingHtml()
{
var content = $('#caja').val();
var newContent = $(content).find("img").replaceWith('<input type="text">');
alert(newContent)
$('#newDiv').html(newContent);
};
</body>
</html>
any ideas? thanks in advance!
There are 2 problems that I can see
newContent is referring to only the img elements, not the complete content
Since you are passing the value to jQuery, if the value does not start with < it will be considered as a selector not as a element creation command
So
//dom ready handler
jQuery(function($) {
//click event handler registration
$('#read').click(parsingHtml);
})
function parsingHtml() {
var content = $('#caja').val();
var newContent = $('<div />', {
html: content
});
newContent.find("img").replaceWith('<input type="text">');
console.log(newContent)
$('#newDiv').html(newContent.contents());
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="caja"></textarea>
<input type="button" id="read" value="read">
<div id="newDiv"></div>
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.