Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a conditional statement that creates a link in an empty id tag (#demo)
The link appears fine on the page when the conditions are met but I am unable to edit it using CSS.
I have tried setting an <a> tag and doing this in CSS:
a{
text-decoration-none;
}
I have tried the same for the id (#demo). I think the issue is that the element does not exist in the standard HTML, only in the JavaScript. Any ideas?
let zone10btitle="Zone 10b";
let zone10blink =zone10btitle.link("zones/zone10b.html");
if(c10b.includes(acodevalue)==true ||
c10bcities.includes(acodevalue)==true){
document.getElementById("demo").innerHTML=zone10blink;
}
link() is not part of the standard but should be supported by all common browsers see here
It returns a string embedded in an <a> tag, so your CSS should match the generated link.
Your CSS rule needs to be a {text-decoration: none;} though, so if what you wrote in your answer is not a typo, you got your mistake: a{ text-decoration-none; } is invalid CSS.
CSS Rules need to be in the form of <selector> { <property>: <value>} with appropriate subsitutes for <selector>, <property> and <value>.
Btw, going for the id demo would affect the parent of the link, not the link itself, as you set the innerHTML of the parent to be the link.
In this link you also have an example code you can run very similar to yours.
You can find similar code snippet here and it styles the a link. Not sure if you are using inline styling or external css.
<!DOCTYPE html>
<html>
<head>
<style>
a{
text-decoration: none}
</head>
</style>
<body>
<p>Click the button to display a string as a hyperlink.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "Free Web Building Tutorials!";
var result = str.link("https://www.w3schools.com");
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
Credit: https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_str_link
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm watching a basic tutorial series on javascript and have been stuck on this super simple script for like close to 30 minutes now. I used an html validator and it all checks out with no errors. However, the code is still not behaving how it should according to the video.
When you type "click me" its supposed to show a dialog box saying 'please enter a real value into the box'. And when you enter a value in the field, it's supposed to substitute the title for whatever you entered.
Sorry for the simple nooby question
EDIT AGAIN: Thanks Arby. That got it working.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javscript">
function substitute () {
var myValue = document.getElementById(myTextBox).value;
if (myValue.length == 0){
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
MyTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute()" />
</body>
</html>
I found some issues with your code, just simple stuff that every beginner goes through (I did), I'll bullet them off:
MyTitle isn't myTitle, JavaScript variables are case-sensetive.
You should stay away from the onclick attribute; he's a bad influence. The point, inline JS is generally not a good idea.
So I added an event listener event instead: [...].addEventListener("click", callback);
Your DOM request to the input box used an undefined variable/object/etc. called myTextBox, instead of a string "myTextBox".
Anyway, I made a JSFiddle for the code, so I could test it, so here is the link to the code with the edits I explained above: https://jsfiddle.net/Lktzw0Lh/
A slightly different approach - since you list jQuery in the tags for this - i have rejigged the code to take advantage of it. I put an onclick event handler on the button which, when clicked gets the value of the textbox and if it is empty - gives the alert. If it is not empty - it swaps the h1 text for the entered text and clears the text input and gives it focus so that you can re-enter new content.
Note that the click handler is in the javascript section and not inline js and also that with jquery - you can chain together commands that affect the same element.
$(document).ready(function(){
$('#testButton').click(function(){
var myValue = $('#myTextBox').val();
if (myValue == ''){
alert('Please enter a real value in the text box!');$('#myTextBox').focus()
}else{
$('#title').text(myValue);$('#myTextBox').val('').focus()
}
})
})
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<button id="testButton" type="button">Click Me</button>
</body>
</html>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
<!DOCTYPE html>
<html>
<body>
<h1>Change an HTML element</h1>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
Can someone explain what this does?
When you click on the first button it fires an onclick event attribute. You've told the event to find an element by the ID of 'msg'. Which is the <p> tag above.
It finds it and then replaces the innerHTML value of "Now you see me" with the string 'Gone!'. Pretty much the same thing happens with the second button.
You can learn more about it at the web address below.
http://www.w3schools.com/tags/ev_onclick.asp
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want to create a very simple HTML toolbar that can do bold, italics and underline so when users select a content editable area within the html page that they can change the default text. Been doing loads of looking around on the internet but all i can find is jquery's with a million lines of code and i really don't want to use these as a lot of the code will be redundant.
Anyone know the code / know where i can get the code that is short and sweet and to the point
Thanks
below a simplest sample for ContentEditable. For documentation see https://developer.mozilla.org/en-US/docs/Web/API/document.execCommand
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contenteditable simplest sample</title>
</head>
<body>
<button id="bold">b</button>
<button id="italic">i</button>
<button id="underline">u</button>
<div contenteditable="true">
Textinput here
</div>
<script>
document.getElementById("bold").onclick = function(e) {
document.execCommand("bold", false, "");
};
document.getElementById("italic").onclick = function(e) {
document.execCommand("italic", false, "");
};
document.getElementById("underline").onclick = function(e) {
document.execCommand("underline", false, "");
};
</script>
</body>
</html>
Greetings
Axel
Could be done with jquery using the addClass & removeClass Method
Something like this would be all the code you need:
$( *YourTextElement* ).addClass( "YourCssDefinition" );
This will of course only affect the entire text within the defined YourTextElement
....
I have a situation with sample code as follows:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<p>
<h1>The header</h1>
<div>
matter ia always matter matter ia <strong>bold matter</strong> matter matter <em>italics matter</em>matter ia <em><strong>bold italics matter</strong></em>lways matter
</div>
</p>
</body>
</html>
I am just trying to retrieve the specific tags like body->p->div->em->strong when I click on "bold italics matter" using jQuery. Is there any standard method to retrieve as per the click event?
If you wan to get the tag name of the element which is clicked, then you can use:
$('*').click(function(e) {
e.stopPropagation();
console.log($(this).prop('tagName'));
});
Fiddle Demo
I'm not completely sure about what you are trying to accomplish. If you are trying to retrieve the tag itself that the text is contained in, i would recommend that you put a <span> tag in around the the text in question and do an onclick="function()" or simply put the onclick right on the <strong> tag.
As far the the JQuery/Javascript goes, if you want to retrieve the content, it looks like
var foo = document.getElementById.innerHTMl("id");
However, this requires you to have an id in your tags which is probably the best, if not
'standard' method of retrieving the content that is within the tag.
After reading your comments, i am editing this post:
The best way to get the parent elements is to use the JQUery .parent() function. I'd imagine that you would just recursively state something like this:
var foo = $("nameofelement").parent();
I hope this is more of what your looking for.
Thanks for contributing everybody. At last I made it myself with the following code.
$(document.body).click(function(e){
var Tags=[], Target=e.target, stat_msg="";
Tags.push(Target.tagName);
while($(Target).parent().get(0).tagName!=="BODY")
{
Tags.push($(Target).parent().get(0).tagName);
Target=$(Target).parent();
}
Tags.push("BODY");
for(i=Tags.length;i>0;i--)
stat_msg=stat_msg+Tags[i-1]+" ";
alert(stat_msg);
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
This should be super simple. The first code block works, but when I wrap it in a function and attempt to call the function, it doesn't work.
This Works:
$(document).ready(function() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
});
This Doesn't Work:
$(document).ready(function() {
function hideatstart() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
UPDATE: After looking at the accepted answer, I was able to get working code. It involved not having any spaces between the lines of code, which would allow p tags to be inserted. Best practice would be to remove the JQuery to a separate script, which I will do. The following code works:
$(document).ready(function() {
function hideatstart(){
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
I inspected the HTML on your live site and found that your snippet is outputted like this:
<div class="art-postcontent">
<!-- article-content -->
<!-- [snipped] -->
<p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><br />
<script type="text/javascript">
$(document).ready(function() {</p>
<p> function hideatstart() {</p>
<p> $("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}</p>
<p> hideatstart();
});
</script></p>
<!-- [snipped] -->
</div>
As you can see, WordPress's wpautop filter wrapped your lines inside paragraphs.
If you need to inject a script somewhere, you better do it with a plugin or a theme function and not by pasting the code in a WordPress post or widget. All regular WordPress content types are escaped to prevent such possibly malicious injections. It seems like you're using a custom art post type, which normally gets a similar treatment. There are ways to prevent the content from being escaped, but you should seriously consider moving your script code somewhere else.