CODEWITHSUNDEEP
javascripthtml
User_42
User_42

Reputation: 69

Show and hide text in list

I wanted to show specific text when something is chosen from the list and hide it if something else is selected. I found the button example on w3Schools, when you click the text appears and when you click it again the text disappears. How would I active something similar to this with the list? I would prefer everything is in JavaScript since I'm trying to learn it.

<!DOCTYPE html>
<html>

<body>
    <button onclick="myFunction()">Click Me!</button>

    <select onchange="myFunction(this)">
        <option>Apple</option>
        <option>Orange</option>
        <option>Pineapple</option>
        <option>Banana</option>
    </select>

    <div id="myDIV">
        This is my DIV element.
    </div>

    <div id="Apple">
        Apples are awesome.
    </div>

    <div id="Orange">
        Oranges are sower.
    </div>

    <div id="Pineapple">
        Pineapple are sower.
    </div>

    <div id="Banana">
        Bananas are sticky.
    </div>



    <script>
        function myFunction() {
            var x = document.getElementById("myDIV");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
    
</body>
</html>

Upvotes: 1

Views: 551

Answers (5)

001
001

Reputation: 2059

  • Get the results and myBtn tags.
  • Create a select tag and append it to the div that has box id.
  • Create an array of objects to the options (The first one is empty for "No option is selected" text).
  • append the options to the list
  • By clicking on myBtn, the selectedOption variable will hold the option value that is selected, then it'll get the value of the key text and add it to div.results.

const results = document.getElementById('results');
const myBtn = document.getElementById('myBtn');

(function(){
    const selectList = document.createElement('select');
    selectList.setAttribute('id', 'selectList');

    function create_select_list(){
        const output = [];
        theOptionsArray.forEach((option) => {
            let optionTag = 
            `<option value="${option.value}">${option.name}</option>`;
            output.push(optionTag);
            selectList.innerHTML = output.join('');
        });
        box.appendChild(selectList);
    }

    const box = document.getElementById('box');
    const theOptionsArray = [    
        {value: '', name: '', text: 'No option is selected'},
        {value: 'apple', name: 'Apple', text: 'Apples are awesome.'},
        {value: 'orange', name: 'Orange', text: 'Oranges are sower.'},
        {value: 'pineapple', name: 'Pineapple', text: 'Pineapple are sower.'},
        {value: 'banana', name: 'Banana', text: 'Bananas are sticky.'}
    ];
    // Run the function
    create_select_list();
    let selectedOption;
    myBtn.addEventListener('click', () => {
        selectedOption = selectList.value;
        for (let i = 0; i < theOptionsArray.length; i++) {
          if (selectedOption == theOptionsArray[i].value) {
            results.innerHTML = theOptionsArray[i].text
          }
        }
    });
})();
<div id="box">
    <button id="myBtn">Click</button>
</div>
<div id="results">Select an option</div>

Upvotes: 2

alakmar Shafin
alakmar Shafin

Reputation: 3162

I believe this will solve your query, in this, I just iterate through all of your options tag and hide all the div with ids in the option tag and unhide the div with the id which is selected. just go through the code and you will find how it works.

<div id="Apple">
    Apples are awesome.
</div>

<div id="Orange">
    Oranges are sower.
</div>

<div id="Pineapple">
    Pineapple are sower.
</div>

<div id="Banana">
    Bananas are sticky.
</div>

<script>
    function myFunction(z) {

        var x = document.getElementById("opt");
        //alert(x.value);
        for (var i = 0; i < z.options.length; i++) {
            str = z.options[i].value;
            d = document.getElementById(str);
            d.style.display = "none";
        }

        select = document.getElementById(x.value);
        select.style.display = "block";

    }
</script>

Upvotes: 1

Rahul Sharma
Rahul Sharma

Reputation: 10081

Create map of value and change innerHTML based on value change.

<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click Me!</button>

<select onchange="myFunction(this.value)">
  <option Value="Select">Select</option>  
  <option value="Apple">Apple</option>
  <option value="Orange">Orange</option>
  <option value="Pineapple">Pineapple</option>
  <option value="Banana">Banana</option>
</select>

<div id="myDIV">
This is my DIV element.
</div>

</body>

<script>
let selected = "Select";
const result = {
Select: "This is my DIV element.",
Pineapple: "Pineapple are sower.",
Banana: "Bananas are sticky.",
Orange: "Oranges are sower.",
Apple: "Apples are awesome."
};


function myFunction(value) {
selected = value || selected;
var x = document.getElementById("myDIV");
x.innerHTML = result[selected] ;
}
</script>
</html>

Upvotes: 0

Yuvraj Mule
Yuvraj Mule

Reputation: 450

function myFunction(opt) {
    if(opt==undefined)
        opt=document.getElementById("fruits")
  
  if(opt.value=="")
  {
      document.getElementById("myDIV").style.display = "block";
      for(var i=1; i<opt.options.length;i++)
        document.getElementById(opt.options[i].value).style.display = "none";
    return;
  }
  document.getElementById("myDIV").style.display = "none";
  
  for(var i=1; i<opt.options.length;i++)
  {
    document.getElementById(opt.options[i].value).style.display = "none";
    if(opt.value==opt.options[i].value)
        document.getElementById(opt.value).style.display = "block";
  }
}
myFunction();
<!DOCTYPE html>
<html>
<body>
    <button onclick="myFunction()">Click Me!</button>

    <select id='fruits' onchange="myFunction(this)">
        <option></option>
        <option>Apple</option>
        <option>Orange</option>
        <option>Pineapple</option>
        <option>Banana</option>
    </select>

    <div id="myDIV">
        This is my DIV element.
    </div>

    <div id="Apple">
        Apples are awesome.
    </div>

    <div id="Orange">
        Oranges are sower.
    </div>

    <div id="Pineapple">
        Pineapple are sower.
    </div>

    <div id="Banana">
        Bananas are sticky.
    </div>
    
</body>
</html>

Upvotes: 0

Ruben Szek&#233;r
Ruben Szek&#233;r

Reputation: 1175

From what I understand. You want to hide something on clicking on another HTML element? This can be done fairly easy and you were quite close to the solution.

<!DOCTYPE html>
<html>

<body>

    <div id="myDIV">
        <button onclick="myFunction('Apple')">Hide Apple</button>
        This is my DIV element.
    </div>

    <div id="Apple">
        <button onclick="myFunction('Orange')">Hide Orange</button>
        Apples are awesome.
    </div>

    <div id="Orange">
        <button onclick="myFunction('myDIV')">Hide DIV</button>
        Oranges are sower.
    </div>

    <script>
        function myFunction(elementId) {
            var x = document.getElementById(elementId);
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
    
</body>
</html>

Upvotes: 0

Related Questions