javascript - 如何将选择菜单连接到从选择类别生成随机文本的按钮

Question

您好我想问一下如何将选择菜单链接到按钮，该按钮接下来会从所选类别中生成随机文本

let cernyhumor = ['hodne', 'malo', 'dobre']
let skola = ['pero', 'tuzka', 'guma']
let zeny = ['hezka', 'mala', 'hodna']
let zajda = ['dezo', 'chytry', 'vzorny']

body{
    margin: 0;
    padding: 0;
    background:#222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    font-family: 'Roboto', sans-serif;
}
select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    outline:0;
    box-shadow:none;
    border:0 ;
    background: #5c6664;
    background-image: none;
    flex: 1;
    padding: 0 .5em;
    color:#fff;
    cursor:pointer;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
    display: none;
}
.select {
    position: relative;
    display: flex;
    width: 20em;
    height: 3em;
    line-height: 3;
    background: #5c6664;
    overflow: hidden;
    border-radius: .25em;
}
.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1em;
    background: #2b2e2e;
    cursor:pointer;
    pointer-events:none;
    transition:.25s all ease;
}
.select:hover::after {
    color: #23b499;
}

.gen{
    width: 70%;
    height: 80%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.btn {

    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 2px solid #e74c3c;
    border-radius: 0.6em;
    color: #e74c3c;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: auto;
    margin-top: 100px;
    padding: 1.2em 2.8em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.btn:hover, .btn:focus {
    color: #fff;
    outline: 0;
}
.third {
    border-color: #3C2B87;
    color: #fff;
    box-shadow: 0 0 40px 40px #3C2B87 inset, 0 0 0 0 #3C2B87;
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.third:hover {
    box-shadow: 0 0 10px 0 #3C2B87 inset, 0 0 10px 4px #3C2B87;
}
.joke{
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    background:#222;
    text-align: center;
    font-size: 25px;
    color: white;

}

<div class="select">
    <select name="format" id="format">
        <option value="1" id="cernyhumor">Černý humor</option>
        <option value="2" id="skola">Škola</option>
        <option value="3" id="zeny">Ženy</option>
        <option value="4" id="zajda">zajda</option>
    </select>
</div>

<div class="gen">
    <span>
    <button class="btn third" id="button">Generovat</button>
        <div id="text" class="joke"></div>
    </span>
</div>

代码笔示例

标签： javascripthtmlcss

Answer 1

请检查是否是您想要的

let cernyhumor = ['hodne', 'malo', 'dobre']
let skola = ['pero', 'tuzka', 'guma']
let zeny = ['hezka', 'mala', 'hodna']
let zajda = ['dezo', 'chytry', 'vzorny']


const optionList = [cernyhumor, skola, zeny, zajda ]
const select = document.getElementById('format')
const button = document.getElementById('button')
const randomText = document.getElementById('text')

const generateOption = () => {
  const optionPickedIndex = select.value - 1
 
  const ranIndex = Math.floor(Math.random() * optionList[optionPickedIndex].length)
  const randomOptions = optionList[optionPickedIndex][ranIndex]
  
  randomText.innerHTML = randomOptions
  
}
button.addEventListener('click',generateOption, false)

body{
    margin: 0;
    padding: 0;
    background:#222;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
    font-family: 'Roboto', sans-serif;
}
select {
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    outline:0;
    box-shadow:none;
    border:0 ;
    background: #5c6664;
    background-image: none;
    flex: 1;
    padding: 0 .5em;
    color:#fff;
    cursor:pointer;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
    display: none;
}
.select {
    position: relative;
    display: flex;
    width: 20em;
    height: 3em;
    line-height: 3;
    background: #5c6664;
    overflow: hidden;
    border-radius: .25em;
}
.select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1em;
    background: #2b2e2e;
    cursor:pointer;
    pointer-events:none;
    transition:.25s all ease;
}
.select:hover::after {
    color: #23b499;
}

.gen{
    width: 70%;
    height: 80%;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.btn {

    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 2px solid #e74c3c;
    border-radius: 0.6em;
    color: #e74c3c;
    cursor: pointer;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin: auto;
    margin-top: 100px;
    padding: 1.2em 2.8em;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.btn:hover, .btn:focus {
    color: #fff;
    outline: 0;
}
.third {
    border-color: #3C2B87;
    color: #fff;
    box-shadow: 0 0 40px 40px #3C2B87 inset, 0 0 0 0 #3C2B87;
    -webkit-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}
.third:hover {
    box-shadow: 0 0 10px 0 #3C2B87 inset, 0 0 10px 4px #3C2B87;
}
.joke{
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
    padding: 20px;
    background:#222;
    text-align: center;
    font-size: 25px;
    color: white;

}

<div class="select">
    <select name="format" id="format">
        <option value="1" id="cernyhumor">Černý humor</option>
        <option value="2" id="skola">Škola</option>
        <option value="3" id="zeny">Ženy</option>
        <option value="4" id="zajda">zajda</option>
    </select>
</div>

<div class="gen">
    <span>
    <button class="btn third" id="button">Generovat</button>
        <div id="text" class="joke"></div>
    </span>
</div>