I was trying to find and answer to my question but I've found none.
I expect the solution to be simple, I just think I'm making some syntax errors.
What I want to achieve: I want to add a new "<dd>" element to my "<dl>" through a JavaScript.
The <dd> element would have an <a> element inside, like:
"<dd><a href =...></a></dd>"
The link to would need to be taken from a form.
Here's the code. I don't really know how to finish it - just starting with JavaScript.
<dl id="dl">
<dt>Menu</dt>
<dd>Home</dd>
<dd>Galeria</dd>
<dd>Canvas</dd>
<dd>Ankieta</dd>
<dd>JQuery</dd>
<dd>Mobilne</dd>
</dl>
<form method="post" id="formularz" onsubmit="myFunction3()">
<p><input type="text" name="link" id="link" value="Tutaj wpisz swój link"></p>
<p><input type="text" name="tytul" id="tytul" value="Tytuł linku"</p>
<p><input type="submit" name="submit" id="submit" value="Potwierdź"></p>
</form>
<script>
function myfunction3(){
var link = document.getElementById("link");
var tytul = document.getElementById("tytul");
var dd = document.createElement("dd");
var dl = document.getElementById("dl");
var a = document.createElement("a");
a.href = link;
a.text = tytul;
dd.add(a);
dl.add(dd);
}
</script>
Thanks for help in advance!
I've editted my script.
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
</head>
<body>
<dl id="dl">
<dt>Menu</dt>
<dd>Home
</dd>
<dd>Galeria
</dd>
<dd>Canvas
</dd>
<dd>Ankieta
</dd>
<dd>JQuery
</dd>
<dd>Mobilne
</dd>
</dl>
<form id="formularz">
<input type="text" name="link" id="link" value="Tutaj wpisz swój link" />
<br/>
<input type="text" name="tytul" id="tytul" value="Tytuł linku" />
<br/>
<button name='submit'>Potwierdź</button>
<br/>
</form>
<script>
function $(sel) {
return document.querySelector(sel);
}
$('#formularz').addEventListener('submit', function (e) {
e.preventDefault();
var link = $('#link'),
tytul = $('#tytul'),
el = document.createElement('dd');
el.innerHTML = '' + tytul.value + '';
$('#dl').appendChild(el);
});
</script>
</body>
</html>
This page adds a link at the end of #dl when the form is submitted.
Also, you may want to take a look at this great free book on Javascript to help you with some of the basics: Eloquent Javascript.
<script>
function myfunction3(){
var link = document.getElementById("link");
var tytul = document.getElementById("tytul");
document.getElementById("dl").innerHTML = '<dt>Menu</dt>\
<dd>Home</dd>\
<dd>Galeria</dd>\
<dd>Canvas</dd>\
<dd>Ankieta</dd>\
<dd>JQuery</dd>\
<dd>Mobilne</dd>\
<dd>NEW ELEMENT HERE, where tytul (title)</dd>';
}
</script>
Related
This solution below works for adding and removing list items. I had to implement Math.random() in order to set a unique id for each element. I was thinking in the professional world this definitely wouldn't cut it considering the chance of a repeating ID.
Wanted to know what would be a more suitable implementation? Any feedback welcome!
Thanks!
HTML
<html>
<head>
<body>
<p id = 'listTitle'> Your List </p>
<form onsubmit = "return false">
<input id = 'inputBar' type = "text" placeholder = "Enter Item"></input>
<input type = "submit" onclick = "getName()"></input>
<input type = "button" value = "Remove" </input>
</form>
<ol id = 'demo'>
</ol>
</body>
</head>
</html>
JS
function getName() {
var input = document.getElementById('inputBar').value
var list = document.getElementById('demo')
var entry = document.createElement('li')
entry.setAttribute("id", Math.floor(Math.random()* (100 - 1) + 1 ))
console.log(entry.id)
entry.setAttribute("onclick", "removeName(this.id)")
entry.appendChild(document.createTextNode(input))
list.appendChild(entry)
}
function removeName(removeID) {
var listItem = document.getElementById(removeID)
listItem.remove()
}
There's no need for dynamic IDs. When appending the new element, just attach a listener that calls entry.remove() when clicked. You can also assign to the textContent instead of using the unnecessarily verbose createTextNode / appendChild.
function getName() {
const inputValue = document.getElementById('inputBar').value;
const li = document.getElementById('demo').appendChild(document.createElement('li'));
li.onclick = () => li.remove();
li.textContent = inputValue;
}
<p id='listTitle'> Your List </p>
<form onsubmit="return false">
<input id='inputBar' type="text" placeholder="Enter Item"></input>
<input type="submit" onclick="getName()"></input>
<input type="button" value="Remove" </input>
</form>
<ol id='demo'>
</ol>
Trying to click the magic8, but the happy, sad and surprised pictures won't show below the line. What did I do wrong? I have saved the images in random.js in the same folder.
<html>
<head>
<script type=text/javascript src="random.js">
</script>
<script>
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
document.getElementById('outputDiv').value = imgName;
}
</script>
</head>
<body>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p>
<input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();">
</p>
<hr>
<div id="outputDiv"></div>
</div>
</body>
</html>
If you want to show and image you need to add the value of the randomoneof on a img tag not on a div tag. Change that and I think it will work
Demo: https://codepen.io/hienhuynhtm/pen/dpLgNr
<script>
var IMAGE_LIST = [
"http://balance3e.com/Images/happy.gif",
"http://balance3e.com/Images/sad.gif",
"http://balance3e.com/Images/surprised.gif"
];
function magicEight() {
var imgName = IMAGE_LIST[Math.floor(Math.random() * IMAGE_LIST.length)];
document.getElementById("randomImg").src = imgName;
}
</script>
<div style="text-align:center">
<h1> Magic 8-ball (Mattel, Inc.) </h1>
<p> Enter a question below, then click on the Magic 8-Ball to recieve its wisdom. </p>
<input type="text" id="questionBox" size=90 value="">
<p><input type="image" src="http://balance3e.com/Images/8ball.gif" id="button" onclick="magicEight();"></p>
<hr />
<img id="randomImg" />
</div>
Setting .value on outputDiv will not display images. You have to set the src attribute of an <img> tag.
Assuming all of the random images live in /Images, you could use the below as your new magicEight function.
function magicEight() {
var imgName;
imgName = RandomOneOf(["happy.gif", "sad.gif", "surprised.gif"]);
var imageTag = "<img src='/Images/" + imgName + "'>";
document.getElementById('outputDiv').innerHTML= imageTag;
}
Disclaimer: I am not looking for someone to code this for me just some pointers to help me fix this problem :)
I have the following web page that allows me to add fields dynamically to a form. The current page works. What I want to do is figure out how to make the javascript at the bottom of the page more generic. example I want to pass the templet id and the target id to the function without hard coding the templet id and the target id into the script. Here is the code that I have and works just fine.
I want to make the morefields function so that I can reuse. I want to pass to the function the template and the target. example function moreFields ( templete, target). this way I can use the same function without editing over and over in different web pages. if you look in to the moreFields function you will see that it is hard coded for "readroot" and "writeroot" I want to change the function so it will take parameters and do the same thing it is doing now.
<HTML>
<HEAD>
<META NAME="generator" CONTENT=
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
<TITLE></TITLE>
<STYLE TYPE="text/css">
div.c1 {display: none}
</STYLE>
</HEAD>
<BODY >
<DIV ID="readroot" CLASS="c1">
Variable Name <INPUT NAME="VarName"><BR>
</DIV>
<FORM METHOD="post" ACTION="/cgi-bin/show_params.cgi">
Function Name: <INPUT NAME="CFunction"> <BR>
Function Alias: <INPUT NAME="AFunction"><BR>
<BR>
<SPAN ID="writeroot"></SPAN>
Function return: <INPUT NAME="AFunction"><BR>
<INPUT TYPE="button" ID="AddMoreFields" VALUE="Give me more fields!" ONCLICK= "moreFields()"> <INPUT TYPE="submit" VALUE="Send form">
</FORM>
<SCRIPT >
var counter = 0;
function moreFields() {
counter++;
var newFields = document.getElementById("readroot").cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById("writeroot");
insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields()
</SCRIPT>
</BODY>
</HTML>
I am using UIWebView in iPhone and loaded one HTML page from resources.
Following is my HTML page code:
<html>
<head>
<title></title>
<SCRIPT language="JavaScript">
function callme(id)
{
var input = 'input'+id;
document.getElementById(input).value = document.getElementById('code').value;
}
</SCRIPT>
</head>
<body>
<input type=hidden id='code' name='code'>
<a href="#" id="click1" name="click1" onclick='callme(1);'>Click1</a>
<input type="text" id="input1" name="input1">
</br>
<a href="#" id="click2" name="click2" onclick='callme(2);'>Click2</a>
<input type=text id="input2" name="input2">
</br>
<a href="#" id="click3" name="click3" onclick='callme(3);'>Click3</a>
<input type=text id=input3 name=input3>
</body>
</html>
I have inject some Javascript on page using following code:
[webView stringByEvaluatingJavaScriptFromString:#"var field1 = document.getElementById('code'); field1.value='Code010203';"];
What I want is when user click on link first injected script should run and then onclick event's function(callme(1) or 2 or 3) for link(Click1,Click2 or Click3) should execute.
function callme(id)
{
injectedCode();
var input = 'input'+id;
document.getElementById(input).value = document.getElementById('code').value;
}
where injected code is:
[webView stringByEvaluatingJavaScriptFromString:#"var field1; function injectedCode() {field1 = document.getElementById('code'); field1.value='Code010203';}"];
I'm not 100% sure I understand your question.
If you want the click event to run the injected code, would this approach work for you :
(this is the injected code below)
document.querySelector("#click1").onclick = function() {
// do your new stuff here
clickMe(1);
};
You could make this generic with a bit of effort e.g.
document.querySelector("a[id^=click]").onclick = function() {
// do your new stuff here
var clickMeArg = this.id.substring("click".length);
clickMe(parseInt(clickMeArg, 10));
};
how can i make a form tag using onsubmit (that executes upon hitting enter) which opens a target window with a given url in a string variable form?
what i have so far:
<div id="row2">
<!-- Intranet Search -->
<form action="" onSubmit="urlGen(this);" method="get" target="_blank">
<input type="text" id="intranet" size="15" value="Search Intranet.."
onFocus="this.value = ''"
onBlur="this.value = 'Search Intranet..'" / >
</form>
<script language="javascript" type="text/javascript">
function urlGen(f)
{
var i1 = "seg1";
var i2 = f.intranet.value;
var i3 = "seg3";
var fullURL = i1 + i2 + i3;
f.action = i1 + i2 + i3;
//document.write(fullURL);
return true;
}
</script>
<br><br>
<a href="javascript: void(0)" onClick="urlGen();" target="_blank">
<div id="submit" class="out"
onMouseOver="document.getElementById('submit').className = 'over';"
onMouseOut="document.getElementById('submit').className = 'out';">
<span>Submit</span>
</div>
</a>
</div>
edit: still havent solved this; any help from someone more experienced with javascript would be greatly appreciated!
You need to give your <input> element a "name" value:
<input type="text" name="intranet" id="intranet" size="15" ...
Alternatively, your Javascript code could use document.getElementById("intranet") to get a reference to the input element.
Also, though this isn't directly relevant, putting a <div> inside an <a> tag is not valid markup.