I have got a small javascript function and a piece of html code where i have a button, and I want that whenever user hovers that button, a little box to appear.Everything seems to be working great,despite that my function executes only after I hover that button for the 2 time(after the page has just loaded and I try to use my function for the 1 time, later everything executes after a firs hover).So what can I do about it?
HTML code
<body>
<div id = "searchBox">
<p id = "paragraph"><input type = "text" name = "serachBar"/>
<input type = "button" value = "szukaj" name = "search"/>
</p>
<div id = "searchButton">Szukaj</div>
</div>
</body>
and javascript itself
<script type = "text/javascript">
function popUp(menu){
var searchBox = document.getElementById(menu).style;
var searcButton = document.getElementById('searchButton');
if(!searchBox || searchBox.display == "none"){
searchBox.display = "block";
}
else {
searchBox.display = "none";
}
};
</script>
Change your if statement like this:
function popUp(menu) {
var searchBox = document.getElementById(menu);
var searcButton = document.getElementById('searchButton');
if (searchBox) {
if(searchBox.style.display == ""){
searchBox.style.display = "block";
}
else {
searchBox.style.display = "";
}
}
};
The original value will be "" instead of "none".
I'm making the assumption that the CSS setting is to display:"none".
I also moved the searchBox condition. If it isn't found, you don't want to set properties at all.
<p> is a flow element and can't contain <input>s.
Besides, your function instructs to toggle hidden state, rather than show box on mouseover. Therefore, the box will hide on first hover, and reappear on the second one.
You probably want to define mouseover and mouseout event listeners.
Related
basically I want to provide the user two options, Yes or No. For example, if he clicks the Yes button, then this information is saved and I can show what he chose at the end of the questionnaire.
I'm trying this way, but it's not working. At the end, nothing appears on the screen...
answer2-A = Yes Button
answer2-B = No Button
----------------------------//------------------------//-------------------------
document.getElementById('answer2-A').addEventListener("click", defineYes);
document.getElementById('answer2-B').addEventListener("click", defineNo);
};
function defineYes(){
document.getElementById('answer2-A').value = 'Yes';
document.getElementById('info').innerHTML = document.getElementById('answer2-A');
};
function defineNo(){
document.getElementById('answer2-B').value = 'No';
document.getElementById('info').innerHTML = document.getElementById('answer2-B');
Few things to address - without seeing the HTML I assume the value property isn't set on the buttons. Additionally you can/should get references to the buttons and re-use them instead of querying over and over. You can use the target of the event to access which button you clicked.
const yesBtn = document.getElementById('answer2-A')
const noBtn = document.getElementById('answer2-B')
const info = document.getElementById('info');
yesBtn.addEventListener("click", trackClick);
noBtn.addEventListener("click", trackClick);
function trackClick(e) {
info.innerHTML = e.target.value;
}
<button id="answer2-A" value="Yes">Yes</button>
<button id="answer2-B" value="No">No</button>
<div id="info"></div>
This is the code on js fiddle for tests https://jsfiddle.net/em7yfa12/
And also code is here:
But as first let me explain what code does. And then I will tell what I need to achieve. I can not find the way by myself. That's why I am asking here for the solution.
When "Open input element to insert text " button is pressed prompt element appears to get text, which will be later painted to the color which was selected in color dialog.
But this event will happen only when color will be changed, because the event is triggered from change in color dialog.
This is all regular. But I need something extra and that is:
If color dialog was opened and no change in color was performed before dialog was closed, then I need to get:
alert("You have to select a different color than any of colors you have selected in previous cases to paint the text");
<input type="button" id="newlabelID" value="Open input element to insert text "/></br>
<input type="color" id="colorDialogID" ></br>
<a id="aID"> Text to paint</br>
var someText;
function createStatusF(){
someText = prompt("Enter some text :", "");
if ((someText=="")||(someText==null)){
return;
}
document.getElementById("colorDialogID").focus();
document.getElementById("colorDialogID").value = "#FFCC00";
document.getElementById("colorDialogID").click();
}
document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";
function peintTheText(){
document.getElementById("aID").innerHTML= someText;
var theColor=document.getElementById("colorDialogID").value;
document.getElementById("aID").style.color=theColor;
}
document.getElementById("colorDialogID").onchange = peintTheText;
You need to use the input event and attach it to the color input. This works, but it's not a good idea to use alert with the color picker, since the color picker will have a higher z index than the alert, hence the user will not be able to click it.
Here's the JS code:
let someText;
let previousColors = [];
let colorDialog = document.getElementById("colorDialogID");
function openColorPicker() {
colorDialog.focus();
colorDialog.value = "#FFCC00";
colorDialog.click();
}
function createStatusF() {
someText = prompt("Enter some text :", "");
if ((someText == "") || (someText == null)) {
return;
}
openColorPicker();
}
document.getElementById("newlabelID").onclick = createStatusF;
document.getElementById("colorDialogID").style.display = "none";
function peintTheText() {
var theColor = colorDialog.value;
previousColors.push(theColor);
document.getElementById("aID").innerHTML = someText;
document.getElementById("aID").style.color = theColor;
}
function onColorSelected(e) {
const theColor = colorDialog.value;
if (previousColors.includes(theColor)) {
alert("You have to select a different color than any of colors you have selected in previous cases to paint the text");
}
}
colorDialog.addEventListener('input', onColorSelected);
colorDialog.addEventListener('change', peintTheText);
Working Fiddle
I have a simple form (text field and submit button). I am trying to have the user submit a number, and the resulting number will display one div (from a set of divs).
I tried using this example as a base (when the user clicks a link, it shows a div, but hides others).
My test is below:
var divState = {};
function showhide(oFrm) {
var dividnum = oFrm.Inputed.value;
var prepar = "para";
var divid = prepar + theInput; /* should result in something like "para52" */
divState[divid] = (divState[divid]) ? false : true;
//close others
for (var div in divState){
if (divState[div] && div != divid){
document.getElementById(div).style.display = 'none';
divState[div] = false;
}
}
divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
http://jsfiddle.net/LfzYc/431/
Note: I am NOT proficient in JavaScript at all, which is why I am having difficulty.
Also, I'd like to add a function ... if the number entered is not between 1-4, show a different div, maybe with the id paraEnd.
Please look at the jsFiddle based on your one. I hope I've done what you want. I changed the showhide function and your HTML (fixed div's IDs and added one more div#paraEnd). I'd suggest you refactoring your code.
You should use jQuery to have an easy way to manipulate the DOM.
Using jQuery I made an example for you, just change your JS and paste mine:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
// get the paragraphs
var paragraphs = $('.paragraph');
// form submit
$('#paragraphform').submit(function (e) {
// prevent the event to flow
e.preventDefault();
// get the input value
var value = $('#Inputed').val() - 1;
// reset all divs removing active css class
paragraphs.removeClass('active');
$('.error').removeClass('active');
// verify if the value doens't exist
if(value < 0 || value > paragraphs.length - 1) {
$('.error').addClass('active');
return;
}
// show the active div
paragraphs.eq(value).addClass('active');
});
})(jQuery);
</script>
Is that what you need?
If you not familiar with jQuery, this is the jquery Learn Center:
https://learn.jquery.com/
And this is a nice tutorial for beginners:
http://www.tutorialspoint.com/jquery/
I'm trying to create simple dictionary web-page and I need to show certain DIV with word's translation and description which is entered in INPUT.
I've created some simple JavaScript for that, but I want to use about 50 words and not planning to create 50 scripts for that :D.
var match = 'cat',
input = document.getElementById('searchbox'),
div = document.getElementById('cat');
input.onkeyup = function(e){
if (this.value == match){
div.style.display = 'block';
}
else {
div.style.display = 'none';
}
};
Instead of that I want to use something different. My goal is to achieve something like that - If text entered in INPUT equals to one my DIV's ID than show it.
For example if visitor typed "CAT" in INPUT than show DIV with "CAT" ID and so on. One script instead of 50.
You can write a function in javascript like this and call this function on click of a button.
<script type="text/javascript">
function fSDiv(var txt,var EId)
{
if(document.getElementById(EId).value === txt)
{
document.getElementById(EId).style.display = "block";
}
}
</script>
You can check if an element exists using the typeof keyword like this:
var input = document.getElementById('searchbox');
var div = document.getElementById(input.value);
if(typeof(div) !=== 'undefined') {
div.style.display = 'block';
}
Okay here is what i have:
<script type="text/javascript">
var where = document.getElementById("info")
var texts = false;
function clear() {
where.innerHTML = "";
};
function dostuff(what) {
if(where.style.value === ""){
var comm = document.createTextNode(what);
where.appendChild(comm);
}else {
clear();
}
};
</script>
the id "info" is a div
this is basically a vertical navigation bar that shows tooltips in a div under the buttons when you hover over them.
So I want to first check if the div has no value then if it doesn't then it will append text into it, else it will clear the text but i also want it to append the text after it clears. I'm not sure how to do this and help would be appreciated. thanks
Since you want to clear the item anyways and put your new text in, why even bothering with the conditional? You could just as easily do:
function dostuff(what) {
where.innerHTML = what;
};
Working example