I'm trying to use Javascript to load more links in my nav bar.
This is what I tried; I just wanted one link in my nav to load more beneath it.
<a href="" onclick="show()"/>collections</a>
<script type="text/javascript">
function show() {
document.write("collection 1 <br /> collection 2 <br /> etc... <br />");
}
</script>
Can anybody suggest a relevant tutorial or give me a hint?
document.write should really only be used while the document is loading. Calling it after the document is loaded will clear the current document and write some new content. To add new content to the page, you would need to create new DOM objects and add them to the page or modify existing DOM objects.
Here's a small example of modifying the page you can see in action here: http://jsfiddle.net/jfriend00/zVS39/
HTML:
collections
<span id="moreText"></span>
Javascript:
function show() {
var o = document.getElementById("moreText");
o.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
}
You can use innerHTML, or if you want to something more complex you could append a new element, for example:
HTML
collections
<div id="hidden"></div>
Javascript
function show() {
var hidden= document.getElementById("hidden"),
newElem = document.createElement("div");
newElem.innerHTML = "<br>collection 1 <br /> collection 2 <br /> etc... <br />";
newElem.style.color = "red";
hidden.appendChild(newElem);
}
See Creating and modifying HTML from the WSC
You didn't tell us what your problem is.
But this is wrong:
<a href="" onclick="show()"/>collections</a>
You have made your a self-closing, so "collections" isn't part of the link and </a> is orphaned/invalid. Thus your function isn't going to fire when you click on "collections".
Write:
collections
you can always use the innerHTML feature.
document.getElementById('someelement').innerHTML = "collection 1</br>collection2 ...";
So your HTML would look like:
<div id = "nav"></div>
<div id = "someelement></div>
So that text you wanna insert underneath your navigation will pop up in "somelement". You can also modify the css to do a show/hide type technique.
Related
I've made multiple search boxes that search external dictionary sites. Due to the site search syntax, I've had to use JavaScript to construct a url from the text box input. This code works perfectly fine:
function prepare_link_glosbe() {
var url_param_gl = document.getElementById('url_param_gl');
var target_link_gl = document.getElementById('target_link_gl');
if ( ! url_param_gl.value ) {
return false;
}
target_link_gl.href = "https://nb.glosbe.com/en/nb"
target_link_gl.href = target_link_gl.href + '/' + encodeURI(url_param_gl.value);
window.open(target_link_gl.href, '_blank')
}
function prepare_link_dict() {
var url_param_dict = document.getElementById('url_param_dict');
var target_link_dict = document.getElementById('target_link_dict');
if ( ! url_param_dict.value ) {
return false;
}
target_link_dict.href = "https://www.dict.com/engelsk-norsk"
target_link_dict.href = target_link_dict.href + '/' + encodeURI(url_param_dict.value);
window.open(target_link_dict.href, '_blank')
}
<!--Search Glosbe.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search glosbe.com" name="url_param_gl" id="url_param_gl" size="40"/>
<input type="button" onclick="prepare_link_glosbe()" value="Glosbe (en-no)" />
<a href="https://nb.glosbe.com/en/nb" id="target_link_gl" target="_blank" ></a>
</td></tr></table></div>
<!--Search Dict.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search dict.com" name="url_param_dict" id="url_param_dict" size="40"/>
<input type="button" onclick="prepare_link_dict()" value="Dict (en-no)" />
<a href="https://www.dict.com/engelsk-norsk" id="target_link_dict" target="_blank" ></a>
</td></tr></table></div>
However, I wish to search both sites using a single input box. I've tried different approaches, including addEventListener, but I'm not fluent enough in either HTML or JavaScript to achieve it. Can anyone point me in the right direction?
First of all, some things that will make your life easier in the long run:
You don't need this.value='', just use the placeholder attribute - it's well supported.
Don't use <table> to create a layout.
Don't use attributes to assign JS event handlers. (so no onclick=)
And now, how to use just one text field for both websites - just remove the second field and move the button somewhere else. Here's an example:
// This is our search input field.
const searchValue = document.getElementById('search_value');
// Here I'm looking for all search buttons and iterating over them
// with for ... of, querySelectorAll accepts valid CSS selectors.
for (let button of document.querySelectorAll('.search_button')) {
// Getting the data-url attribute value from the button.
const url = button.dataset.url;
// Adding a click event handler, instead of relying on onclick=''
button.addEventListener('click', function () {
// Quick string replace...
const targetURL = button.dataset.url.replace('%s', encodeURI(searchValue.value));
// ...and here we open the new tab.
window.open(targetURL, '_blank');
});
}
<div>
<input type="text" placeholder="Search..." id="search_value" />
<button class="search_button" data-url="https://nb.glosbe.com/en/nb/%s">Glosbe (en-no)</button>
<button class="search_button" data-url="https://www.dict.com/engelsk-norsk/%s">Dict (en-no)</button>
</div>
Here's the explanation:
I'm using the HTML data-* attributes (accessible in JS via element.dataset.*) to store the URL, %s is being used as a placeholder for the search value and will be later replaced with the .replace function.
Instead of manually assigning IDs to buttons I've declared a class - this allows you to extend the application infinitely.
I've merged the input fields into just one and read its value in the button event handler.
I've replaced your this.value='' hack with a proper placeholder.
I've removed the table layout, if you wish to add a nicer layout or styling I would suggest to learn more about CSS - also: don't use HTML attributes to style elements (except for class and style). Avoid using ID selectors in CSS as well (it's fine in JS, but in CSS it can cause issues when it comes to importance). Also, you should avoid the style attribute anyway - it will take precedence over most CSS rules except for the rules with !important and causes code duplication.
I have a function that shows the password on a textbox and another the hides it and hows the dots.
Here's one of them:
function MouseOver_MudarTipoPassword() {
document.getElementById('<%= tb_PalavraPasse.ClientID %>').setAttribute('type', 'singleline');
}
And the control that has the events:
<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword()" onmouseout="MouseLeave_MudarTipoPassword()" />
So, I I've been cleaning up the code because there are functions being used on several pages and I'm combining them into a javascript file. It works like this if I put it in the head section of the page. But I want to pass an argument instead. I want to pass the textbox clientid. How can I do that?
Make the function take a parameter:
function MouseOver_MudarTipoPassword(elementId) {
document.getElementById(elementId).setAttribute('type', 'singleline');
}
Pass the id into the function call:
<img id="img_Eye" runat="server" src="~/Recursos/Imagens/eye-icon.png" onmouseover="MouseOver_MudarTipoPassword('img_Eye')" onmouseout="MouseLeave_MudarTipoPassword('img_Eye')" />
Update
Apologies, I didn't pay enough attention to the question. The problem with my answer is that the script must run before the DOM is created, like in the HEAD.
To make it work like you want you will have to attach an event listener to your elements. You also need a way to dynamically associate the target of the listener code. You can do that with data-* attributes.
See this fiddle for working example
The sample markup:
<input type="text" id="theTextBox" value="The IT Crowd" />
<hr />
<img id="Moss" src="https://media0.giphy.com/media/TrDxCdtmdluP6/giphy.gif" data-target="theTextBox" />
The
sample javascript:
var test = document.getElementById("Moss");
test.addEventListener("mouseover", MouseOver_MudarTipoPassword, false);
function MouseOver_MudarTipoPassword( event ) {
var theImg = event.srcElement;
var target = theImg.dataset.target; //re-use this function by applying data-target to all elements that need it (does not have to be named "target")
document.getElementById(target).setAttribute('type', 'password');
}
couldn't find a specfic answer elsewhere. I'm totally new to JS and trying to pull a value out of a form and write it to the page. The result when I try to write ProductName is undefined, and when I try to write ProductNameElement is null. I'm sure it's to do with the form values being empty when the page loads but not sure after that...
<script>
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
function showname(){
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">Product Name: <input type="text" id="ProductName" value=""></input></div>
<input type="button" value"showname" onclick="showname();"></input>
You are running the first two lines of your script too early BEFORE the elements in your page have been parsed and placed into the DOM. Because of that, the ProductName element doesn't exist yet when you're trying to find it with document.getElementById("ProductName");.
Place your script right before the </body> tag and then all your page elements will be available when you run your script. Or, just put all your code in the showname function that isn't called until the click event.
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
And, as others have said, using document.write() after the documented has been loaded will cause the existing document to be cleared and a new empty document will be created. This is pretty much never what you want. If you're just doing this for debugging, use console.log(ProductName) and look at the debug console.
You'll have to get the element and the value inside the function, otherwise they aren't available, and the change of the value isn't caught
<script>
function showname(){
var ProductNameElement = document.getElementById("ProductName");
var ProductName = ProductNameElement.value;
document.write(ProductName);
}
</script>
<h2>Revenues</h2>
<div class="number">
Product Name: <input type="text" id="ProductName" value="" />
</div>
<input type="button" value"showname" onclick="showname();" />
FIDDLE
And inputs are self closing, and you should stop using document.write, it will overwrite the entire document and remove everything that is currently there !
I have a simple input line and want to append whatever has been entered each time somebody pushes the OK button. Sounds simple so far, still I am unable to get it working
HTML:
<p>
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<p id="status">Ok</p>
<br>
JQuery:
$(document).ready(function(){
$('#status').on('click', function(){
var input = $('input[name=todo]').val();
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').after('#status');
});
});
I also tried my luck with append or appendTo, but both times unsuccessfully.
Just in case here is the JSFiddle: http://jsfiddle.net/NRWzE/
.after() works, but you need to set it up correctly, according to documentation it should be:
.after( content [, content ] )
So the right way is:
$("#status").after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
Try use jquery insertAfter:
$(document).ready(function () {
$('#status').on('click', function () {
var input = $('input[name=todo]').val();
$('<br><b id="taskz">' + input + '</b> - <b id="statusz">Ok</b>').insertAfter('#status');
});
});
It looks like you meant to use:
$('#status').after('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
(see after docs)
or, alternatively insertAfter:
$('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>').insertAfter('#status');
Try this:
$('#status').click(function(){
var input = $('input[name=todo]').val();
$('#status').append('<br><b id="taskz">'+input+'</b> - <b id="statusz">Ok</b>');
});
There are a few things going on, but the big thing is that you need to research more how after, append and appendTo work. Here's the basic syntax difference in the methods that share a name but one has To on the end:
Newcontent.appendTo(existingElement) returns newElements.
existingElement.append(newContent) returns existingElement.
Additionally, after puts the new element as a sibling of the reference element, whereas append puts the new element as a child. This is an important difference.
So, try this script then:
var taskid = 1;
$('#valueform').on('submit', function(){
var input = $('#todo').val();
$('<br><span id="task' + taskid.toString() + '">' + input
+ '</span> - <span id="status' + taskid.toString()
+ '">Ok</span>').appendTo('#status');
taskid += 1;
$('#todo').focus().select();
return false;
});
$('#todo').focus().select();
See a Live Demo at JSFiddle
Here's the supporting HTML:
<form id="valueform">
<input name="todo" id="todo" type="text" value="Set Me To Value" size="32" maxlength="30" />
<input type="submit" value="OK" id="okbutton">
</form>
<p id="status"></p>
There are some other concerns:
I recommend you study which HTML elements are allowed within which HTML elements.
Instead of putting a <b> tag on each item, use CSS. Additionally, if there is semantic importance for the bolding, then use <strong> instead. <b> also should probably not take an id because it is a presentation tag, not a content tag. When thinking of presentation vs. semantics, one must consider screen readers or browsers that cannot render bold text--in that case, <strong> will allow them to emphasize the text in another way if needed.
Get familiar with the jQuery documentation. Careful reading of what exactly each function does, the object it works on, the parameters expected, and the values returned will enable you to get past barriers in the future without having to ask here.
It looked to me like you wanted to put the new content inside of the #status paragraph, not after it. So I wrote my script that way. If you put it after the way you wrote it, then the most recent status will be on top--but then you have non block-level content (starting with your <br>) outside of any block-level element. So you should be appending <p> elements, or you should put your content inside the existing <p>.
Note: I added a form and made the button type submit instead of button to get easy Enter-key handling. It doesn't have to be this way.
I wrote an ajax program.when i am getting response, at that time i will display
that content in my web page using html tags.
So how can I use html tags in javascript?
A sample data you get from server, and a sample html you want to add would make it easier for people to help you.
The basic steps are
1.Get a reference to the html node you want to put the new data in. There are multiple strategies to get reference to the node. If it has an id, it's most starightforward.
2.set innerHTML property.
eg
var node = document.getElementById("targetNode");
node.innerHTML = "<div>data</div>";
Well... Not much detail so not much of an answer...
Easy way
document.write("<body> <div> this is on my page! </div> </body>
or you can edit the innerhtml of an element to place things inside it
document.getElementById("id").innerHTML = "<div>This is inside my element with id="id" </div>"
Answers the question, no?
Instead of embedding html into javascript, you could make a bunch of predefined javascript functions and then use them outside of the script tags. For example, here's how to display a picture while still using the javascript functions.
<html>
<script type="text/javascript">
function display_message()
{
alert("This is a message.");
};
</script>
<body>
<img src="image.jpg">
<form>
<input type="button" value="Click me!" onclick="display_message()" />
</form>
</body>
</html>
I know this is an old post, but this could be helpful...
Using jquery is great way to combine html elements with script
Note: This would be used in the body, if using it in the be sure to enclose it in
$(document).ready (function(){ YOUR CODE });
// Create an object:
var url = {
link: "https://stackoverflow.com/questions/2834929/how-can-i-use-html-tags-in-javascript"
};
// Display URL object:
$('#panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//Note: the # denotes id, if you want to use a class it would be:
//$('.panel').html('<a href=' + url.link + '>' + url.link + '</a>');
//your html would be: <div id="panel"></div> or whatever you choose ie <p> and so //forth